所有變量用$開頭，如果變量要嵌套在字符串里牲迫，用#{$var}格式
$side : left;
h2 { padding-#{$side}: 1rem; }
計(jì)算功能
$mul : 5;
h2 { font-size:0.1rem * $mul; }
嵌套股缸，自身屬性嵌套需要“：”衡楞，可以用&引用自身。子元素直接嵌套敦姻，可以混寫
h2{
margin: {
left:0.5rem;
top:0.3rem;
}
&:after{
content:'';
display:block;
height:1rem;
}
span {
color:#c10;
}
}
類的繼承 @extend %class,一般用占位符的寫法提高識(shí)別度
在@media中不支持外部定義的"類" 瘾境！fuck
%bt { border-bottom:1px solid #ddd;}
.foo {
@extend %bt; //優(yōu)先級(jí)最低，首先編譯
border-top :1px solid #ccc;
}
@mixin 引用镰惦，可傳遞參數(shù)迷守，使用@include調(diào)用
@mixin padding($pl:0.2rem,$pt,$pr,$pb){
padding-left :$pl;
padding-top:$pt;
padding-right:$pr;
}
h2 {
@include padding(0.1rem,0.2rem,0.3rem,0.4rem); // 參數(shù)數(shù)量必須相同。聲明時(shí)幾個(gè)旺入，調(diào)用時(shí)必須幾個(gè),支持設(shè)置默認(rèn)值
}
for循環(huán) @for $i from 1 to/through 6 { }
to：后開區(qū)間兑凿，through：后閉區(qū)間凯力！坑爹的語法
@for $i from 1 through 6 {
.box#{$i}{
backgorund-image:url(img/icon#{$i}.png);
}
}
each循環(huán) @each $attr in a,b,c,d { }
@each $attr in a,b,c,d {
.box-#{$attr} {
background-image:url(img/icon-#{$attr}.png);
}
}
自定義函數(shù)
@function double($n) {
@return $n * 2;
}
顏色函數(shù)
lighten($color, 10%); /* 返回的顏色在$color基礎(chǔ)上變亮10% */
darken($color, 10%); /* 返回的顏色在$color基礎(chǔ)上變暗10% */
saturate($color, 10%); /* 返回的顏色在$color基礎(chǔ)上飽和度增加10% */
desaturate($color, 10%); /* 返回的顏色在$color基礎(chǔ)上飽和度減少10% */
grayscale($color); /* 返回$color的灰度色*/
complement($color); /* 返回$color的補(bǔ)色 */
invert($color); /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/
