Sass入门学习篇

学习Sass的起因是Ionic2框架中使用到了这个css技术，之前有学过LESS，学Sass还是比较容易的。

1. 用’$’符号代表变量。

   $color: red;

2. 变量可以用在css属性上面。

   $side: left; .div{ margin-#{$side}:0px; }

3. sass文件在CLI下编译，加上–watch的话会监视文件的变化。

   sass --watch <源文件文件路径>/style.scss:<输出路径>/style.css

1. 如果使用嵌套的样式的话，编译的时候需要在末尾加上参数可以输出不同格式。

• 嵌套输出方式[ –style nested ]
• 展开输出方式[ –style expanded ]
• 紧凑输出方式[ –style compact ]
• 压缩输出方式[ –style compressed ]

1. 变量后面加上[ !default ]的话，优先级低于不加这个参数的。

2. 嵌套写法中，使用[ & ]代替父选择器。

   nav{ a{ header & {color:green;} } }

3. 属性可以嵌套书写。

   .box{ font: { size:12px; weight:bold; } }

4. 使用参数[ @mixin ]来声明混合宏。

   @mixin box-shadow($radius){ ... }

5. 调用已经定义好的混合宏。

   button{ @include box-shadow(5px); }

6. 继承父类样式需要使用[ @extend ]参数。

   @extend .btn;

7. 占位符[ % ]用于写需要被继承的类，不[ @extend ]的时候不会产生代码。

   %md5{ margin-top:5px; }

8. 代码块中包含变量的时候使用混合宏，但是多次调用的代码不会合并。
   如果不需要传递值的时候使用继承，不论是否调用都会生成对应样式代码。
   占位类似于继承，但不调用的时候不会产生额外代码。

9. 插值[ #{$var} ]不能使用在mixin中，但可以使用在extend中。

   @extend %mt5-#{$scale};

10. 注释方式[ // ]不会在目标文件生成，而[ / / ]会在目标文件生成。

11. 使用加法或减法的时候，不用类型的单位会使编译器报错。

    width: 20px + 1em;

12. 使用除法的时候，需要加上小括号，或者是有其他运算符，或者是变量或函数。

    width: (100px / 2); height: 100px / 2 + 10px;

13. 简单的for循环，从1循环到12。

    @for $i from 1 through 12 { ... }

14. 颜色的加法，会分为RGB三部分来相加。

    $color: #010203 + #040506; // #050709

15. 字符的加法，加完后会自动判断是否显示引号。

    content: "Foo " + Bar; /* 保留引号 */ font-family: sans- + "serif"; /* 不留引号 */