bootstrap

变量：

变量声明：

sass变量的声明和css属性的声明很像，如下：

变量引用：

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

变量名：

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线，这取决于个人的喜好。如下：$font-size与$font_size指向的是同一个变量

body{
  background-color: $color;
  height: 300px;

  button{
    font-size: $font-size;
  }
}

或

body{
  background-color: $color;
  height: 300px;

  button{
    font-size: $font_size;
  }
}

面版：

<body class="container">
    
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">Panel heading
            <button class="close bg-info text-danger">&times;</button>
            <!-- <button type="button" class="close " aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
        </div>
            <div class="panel-body">
                <p>Text goes here...</p>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Heading 1</th>
                            <th>Heading 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Content 1</td>
                            <td>Content 2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
    
            <!-- Table -->
           
            <div class="panel-footer">
                footer
            </div>
    </div>
    
</body>

运行如下：

bootstrap

推荐阅读