Sass ：css预处理语言
Sass简介:
- scss:scss是最新版的sass。.scss使用带大括号的语法规则，.sass使用缩进式的语法规则
- 四种生成的样式：1）嵌套输出 nested 2）展开输出 expand 3）紧凑输出 compact 4）压缩输出 compressed
变量：
- 变量声明: 用$表示一个变量；例如$color:red;
- 普通变量和默认变量：1)普通变量:$color:red; 2)默认变量:$color:red !default;。普通变量名和默认变量名相同的话，普通变量会覆盖默认变量
- 全局变量和局部变量：sass有作用域的概念，可以在局部的{}中声明变量，使其成为局部变量；局部变量通过额外添加 !global,使该局部变量成为全局变量（受用于声明之后）
- 选择器嵌套：&代表父元素
- 属性嵌套：background:{color:red} 转变成 background-color:red
混合（mixin）：
-
@mixin：声明一个宏。 @mixin border-radius{-webkit-border-radius:1px;-moz-border-radius:1px}然后通过 @include来调用；div{@include border-radius;}
- 无参数 mixin: @mixin border-radius{-webkit-border-radius:1px;-moz-border-radius:1px}
- 有参数 mixin: @mixin border-radius($size:1px){-webkit-border-radius:$size;-moz-border-radius:$size}
- 多个参数 mixin: @mixin container($c:color,$d:red){$c:$d}
- 多组值 mixin: @mixin much($box-shadow){box-shadow:$box-shadow;} 调用 div{@include much(0 0 1px 1px grey)}解析成 css为 div{box-shadow:0 0 1px 1px grey}
继承：
- @extend: 使用@extend来继承选择器; .a{color:red;) .b{@extend .a;}则解析成.b{color:red;}
- 继承多个选择器: .a{color:red} .b{background-color:green;} .c{@extend:.a;@extend:.b;}
基本特性:
- 占位符: 用%表示，用@extend 调用，如果不掉用不会生成相应的css代码 %c{color:red} .a{@extend %c;}
条件判断和循环:
- @if 和 @else : p{@if 1+1==2{width:100px;} @else {width:20px;}}
- 三目运算 : $bool:true; p {font-weight: if($bool,bold,normal)}
- for循环: 有两种方式 1）@for $i from 1 through 3 {.item-#{$i}{width:2em*$i}} 解析为 : .item-1{width:2em};.item-2{width:4em;};.item-3{width:6em} 。2）@for $i from 1 to 3 {.item-#{$i}{width:2em*$i}} 解析为 : .item-1{width:2em};.item-2{width:4em;};。两者的区别在于最后一个数据是否解析
- each循环 :@each $var in <list> ; @each $n in a,b,c{.#{$n}{background-image:url("./#{$n}.png")}}
- while循环 :$i:3;@while $i>1{.item-#{$i}{width:2em*$i;$i : $i - 1;}}