1.變量
$color-white:#fff
p{
color:$color-white;
}
2.嵌套普通標(biāo)簽
$color-white:#fff
div{
p{
color:$color-white;
}
}
3.嵌套偽類：通過“&”實現(xiàn)
a{
color:#fff;
&:hover{
color:#000
}
}
4.混合：@mixin 和 @include
// 基礎(chǔ) @mixin名稱
@mixin test{
width:100px;
}
div{
@include test;
}
// .可以傳參數(shù) @mixin名稱（option1,option2,...）{
...
}
@mixin test($width){
width:$width;
}
div {
@include test(100px)
}
// 設(shè)置參數(shù)默認(rèn)值
@mixin 名稱 （option1:value1,option2:value:2,...）{
....
}
@mixin test($width,$height:100px){
width:100px;
height:$height;
}
div {
@include test(100px)
}
5.繼承擴(kuò)展：@extend 會繼承指定元素的所有樣式，包括子元素的所有樣式
.test1{
width:100px;
}
div{
@extend .test1;
height:10px;
}
6.導(dǎo)入樣式：@import
@import 'color';
