Sass

Sass ：css预处理语言

Sass简介:

1. scss:scss是最新版的sass。.scss使用带大括号的语法规则，.sass使用缩进式的语法规则
2. 四种生成的样式：1）嵌套输出 nested 2）展开输出 expand 3）紧凑输出 compact 4）压缩输出 compressed

变量：

1. 变量声明: 用$表示一个变量；例如$color:red;
2. 普通变量和默认变量：1)普通变量:$color:red; 2)默认变量:$color:red !default;。普通变量名和默认变量名相同的话，普通变量会覆盖默认变量
3.  全局变量和局部变量：sass有作用域的概念，可以在局部的{}中声明变量，使其成为局部变量；局部变量通过额外添加 !global,使该局部变量成为全局变量（受用于声明之后）
4. 选择器嵌套：&代表父元素
5. 属性嵌套：background:{color:red} 转变成 background-color:red

混合（mixin）：

1. @mixin：声明一个宏。 @mixin border-radius{-webkit-border-radius:1px;-moz-border-radius:1px}然后通过 @include来调用；div{@include border-radius;}

2. 无参数 mixin: @mixin border-radius{-webkit-border-radius:1px;-moz-border-radius:1px}
3. 有参数 mixin: @mixin border-radius($size:1px){-webkit-border-radius:$size;-moz-border-radius:$size}
4. 多个参数 mixin: @mixin container($c:color,$d:red){$c:$d}
5. 多组值 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}

继承：

1. @extend: 使用@extend来继承选择器; .a{color:red;) .b{@extend .a;}则解析成.b{color:red;}
2. 继承多个选择器: .a{color:red} .b{background-color:green;} .c{@extend:.a;@extend:.b;}

基本特性:

1. 占位符: 用%表示，用@extend 调用，如果不掉用不会生成相应的css代码  %c{color:red}  .a{@extend %c;}

条件判断和循环:

1. @if 和 @else : p{@if 1+1==2{width:100px;} @else {width:20px;}}
2. 三目运算 : $bool:true; p {font-weight: if($bool,bold,normal)}
3. 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;};。两者的区别在于最后一个数据是否解析
4. each循环 :@each $var in <list> ; @each $n in a,b,c{.#{$n}{background-image:url("./#{$n}.png")}}
5. while循环 :$i:3;@while $i>1{.item-#{$i}{width:2em*$i;$i : $i - 1;}}

转载于:https://www.cnblogs.com/mooniitt/p/6384621.html