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;
  }
```

运算

  $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!";
  }

支持数字的加减乘除、取整等运算。
+可用于连接字符串。
#{}插值语句可以在选择器或属性名中使用变量。
注意：/ 被视为除法运算符号只有三种情况

如果值被圆括号包裹
如果值，或值的一部分，是变量或者函数的返回值
如果值是算数表达式的一部分

作者：tiancai啊呆
链接：https://www.jianshu.com/p/0738f2d67a18