sass初探

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

• 变量
  sass使用$符号来标识变量，你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值，这对于维护来说很方便，只需修改一处即可。
  sass源文件

    $highlight-color: #f90 !default;  // !default表示变量默认值
    $highlight-border: 1px solid $highlight-color;
    .selected {
      border: $highlight-border;
    }
  

  编译之后的css

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

• 嵌套
  sass 允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。&代表父选择器。
  sass源文件

    #content {
      article {
        h1 {
          color: #333;
        }
        p {
          margin-bottom: 1.4em;
        }
      }
      aside {
        background-color: #eee;
      }
  
    article a {
      color: blue;
      &:hover {
        color: red;
      }
    }
    
  

  编译之后的css

    #content article h1 {
      color: #333;
    }
  
    #content article p {
      margin-bottom: 1.4em;
    }
  
    #content aside {
      background-color: #eee;
    }
  
    article a {
      color: blue;
    }
    article a:hover {
      color: red;
    }
  

• 混合器
  sass的混合器实现大段样式的重用，混合器使用@mixin标识符定义。然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。
  sass源文件

    @mixin rounded-corners {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    notice {
      background-color: green;
      border: 2px solid #00aa00;
      @include rounded-corners;
    }
  

  编译之后的css

    notice {
      background-color: green;
      border: 2px solid #00aa00;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
  

• 继承
  sass使用@extend来实现继承。@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error ,.seriousError这一选择器组进行替换。
  sass源文件

    .error {
      border: 1px solid red;
      background-color: #fdd;
    }
    .error a {
      color: red;
      font-weight: 100;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
  

  编译之后的css

    .error,
    .seriousError {
      border: 1px solid red;
      background-color: #fdd;
    }
  
    .error a,
    .seriousError a {
      color: red;
      font-weight: 100;
    }
  
    .seriousError {
      border-width: 3px;
    }
  

• 注释

    body {
      color: #333; // 这种注释内容不会出现在生成的css文件中
      padding: 0; /* 这种注释内容会出现在生成的css文件中 */
    }
  

  编译之后的css

    body {
      color: #333;
      padding: 0;
      /* 这种注释内容会出现在生成的css文件中 */
    }
  

• 导入
  sass也有一个@import规则，那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。sass局部文件的文件名以下划线开头。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。

  //2.scss
    .center {
      text-align: center;
    }
    //1.scss
    @import "2";
  

  编译之后的css

    .center {
      text-align: center;
    }
  

• 后缀
  sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种就是我们这里使用的 scss 文件，使用大括号和分号。建议使用后缀名为 scss 的文件。
• 函数
  使用@function定义函数，可以含有多条语句，需要调用 @return 输出结果。建议在自定义函数前添加前缀避免命名冲突。

    @function c_pxToem($px) {
      @return $px/16px + em;
    }
    .title {
      width: c_pxToem(32px);
    }
  

  编译之后的css

    .title {
      width: 2em;
    }
  

• 运算
  • 支持数字的加减乘除、取整等运算。
  • +可用于连接字符串。
  • #{}插值语句可以在选择器或属性名中使用变量。
  • 注意：/ 被视为除法运算符号只有三种情况
    1. 如果值被圆括号包裹
    2. 如果值，或值的一部分，是变量或者函数的返回值
    3. 如果值是算数表达式的一部分

    $border: 2px;
    .title {
      height: 20px + 10px;
      width: 100px - 50px;
      line-height: 15 * 2px;
      padding: 10px / (2);
      margin: 5px + 10px/2;
      border: $border/2 solid red;
    }
    p:before {
      content: "Foo " + Bar;
      font-family: sans- + "serif";
    }
    p:after {
      content: "I ate #{$border} pies!";
    }
  

  编译之后的css

    .title {
      height: 30px;
      width: 50px;
      line-height: 30px;
      padding: 5px;
      margin: 10px;
      border: 1px solid red;
    }
  
    p:before {
      content: "Foo Bar";
      font-family: sans-serif;
    }
  
    p:after {
      content: "I ate 2px pies!";
    }