Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

  • sass使用$符号来标识变量，比如 

    1. $head-menu-height: 60px !default;  // 头部菜单高度

    嵌套CSS 规则

  • 嵌套规则避免重复书写

  • 使用父选择器的标识符& 对嵌套规则如何解开提供更好的控制

    1. &:focus{
    2.     background-color: darken($panel-color, 2%);
    3.     color: #fff;
    4.   }

    混合器

  • 混合器使用@mixin标识符定义，本框架将常用mixins函数全部存放在mixins.scss文件下。

    1. // 圆形盒子
    2. @mixin circle($size: 50px,$bg: #fff) {
    3. border-radius: 50%;
    4. width: $size;
    5. height: $size;
    6. line-height: $size;
    7. text-align: center;
    8. background: $bg;
    9. }

  • 通过@include来使用这个混合器，放在你希望的任何地方，如下所示。

    1. .top-circle{
    2.         top: -70px;
    3.         right: -10px;
    4.         position: absolute;
    5.         opacity: 0.6;
    6.         @include circle(100px, #fff);
    8.       }