【笔记】sass

sass入门
1、可以定义变量
2、嵌套
3、导入其他sass文件，最后编译为一个CSS文件
4、@mixin定义一些代码片段，且可传参数。@include
5、@extend组合代码声明
6、运算
7、颜色函数color:darken($linkColor,10%)
  


语法
1、后缀名：sass不适用大括号和分号，scss使用大括号和分号
2、导入：
若导入sass则生成一个css文件，若导入css文件，则按照原来那样只是@import.
源文件_reset.scss。@import“reset.scss”、@import"reset"都合法
3、注释//和/**/   //不会转入css文件中
4、变量：
$开头
默认变量在值后面加上!default、覆盖只需要在默认变量之前重新声明下变量
特殊变量应用于class和属性、应用于复杂的属性值：以#{$variables}形式
多值变量
list:函数参考sass Functions(http://sass-lang.com/documentation/Sass/Script/Functions.html)
map
全局变量变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用
5、嵌套
选择器嵌套 &表示父元素选择器
属性嵌套 属性拥有同一个开始单词，如border-width，border-color
6、@at-root：跳出选择器嵌套，不能跳出@media或@support
@at-root (without: ...)和@at-root (with: ...)
应用于@keyframe
7、混合@mixin
声明的@mixin通过@include来调用
无参数mixin、有参数mixin、多个参数mixin、多组值参数mixin（在变量后加三个点表示）
@content:使@mixin接受一整块样式
传递参数的用@mixin，而非传递参数类的使用下面的继承%
8、继承@extend
占位选择器%：不调用则不会有任何多余的css文件,通过@extend调用
在@media中暂时不能@extend @media外的代码片段，以后将会可以
9、函数
自定义函数，以@fuction开始（参考sass Functions）,@return返回
10、运算（加减乘除）运算符前后请留一个空格，不然会出错
11、条件判断及循环
@if判断、@else
三目判断（if($condition, $if_true, $if_false)）