Scss基础用法
一、注释用法：
（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。
（2）/! /：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。
（3）/ /：该注释在compressed的style的css中没有，其他style的css文件都会含有。
二、变量：
1.一般以$开头，有作用域限制
$color: red;
.div{background-color: $color;
}
2.若子选择器中定义的变量想成为全局变量，可以用!global
.div{$width: 5px !global;width: $width;
}.p{width: $width;
}
3.嵌套引用，需#{}进行包裹
$left: left;
.div{border-#{$left}-width: 5px;
}
4.计算
$left: 20px;
.div{margin-left: $left 12px;margin-top: $left / 2;
}
三、选择器
1.选择器嵌套（允许属性嵌套）
.div{.span{height: 12px;}.p{border: {color: red;}}
}
2.引用父元素（使用&符号）
.div{&:hover{cursor: pointer;}
}
四、代码复用
1.继承（若在div2后再加一个div1，也会影响div2的属性）
.div1{font-size: 14px;
}
.div2{@extend .div1;color: red;
}
2.引用外部的scss文件（文件路径建议用相对路径）
@import ‘ ./test.scss’;
3.Mixin与Include
//使用@mixin命令，定义一个代码块
@mixin left {float: left;margin-left: 5px;
}//使用@include命令，调用这个mixin代码块
div {@include left;
}
五、参数
eg1：
@mixin common($value1, $value2, $defaultValue: 5px){display: block;margin-left: $value1;margin-right: $value2;padding: $defaultValue;
}
.div1{font-size: 8px;@include common(11px, 13px, 15px);
}
.div2{font-size: 8px;@include common(11px, 13px);
}
eg2：
//生成浏览器前缀。@mixin rounded($vert, $horz, $radius: 10px) {border-#{$vert}-#{$horz}-radius: $radius;-moz-border-radius-#{$vert}#{$horz}: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;}//使用的时候调用：#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }
六、条件语句
可以用@if(){}来判断，也可以用@if(){}@else来判断
@if lightness($color) > 30% {background-color: #000;
} @else {background-color: #fff;
}
七、循环语句
1.for循环
@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}
2.while循环
$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}
3.each（类似于for）
@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");}
}
八、函数
可以自定义函数
@function double($n) {@return $n * 2;
}#sidebar {width: double(5px);
}
更多专业前端知识，请上 【猿2048】www.mk2048.com
