1.嵌套偽類嵌套
.clearfix{
&:before,&:after{
content:" ",
display:table}
&:after{
? clear:both,
?overflow:hidden,
}
}
編譯出來的css
.clearfix:before ,? .clearfix:after{
? ? content:"";
? ? display:table;
? ? ?}
.clearfix:after{
? ?clear:both;
? ? overflow:hidden;
}
2.聲明混合宏
? ?在sass中使用@mixin來聲明一個(gè)混合宏??類似 CSS 中的 @media@font-face 一樣
? ? @mixin? border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}
混合宏的參數(shù)傳多個(gè)參數(shù)可以把公共的用混合宏寫，其余的css需要的時(shí)候直接調(diào)用就可以,可以復(fù)用重復(fù)代碼塊。但其最大的不足之處是會生成冗余的代碼塊
@mixin size($width,$height){
? ? width:$width;
? ? height:$height;
}
.box-size{
@include size(300px,500px)
}
3.sass繼承,@extend”來繼承已存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承
.btn {
? border: 1px solid #ccc;
? padding: 6px 10px;
? font-size: 14px;
}
.btn-primary { background-color: #f36; color: #fff;@extend.btn;}
4.sass可以進(jìn)行加減乘除,前提是必須是相同類型的單位
加減:
$full-width:960px
$sidebar-width:200px
.content {
width: $full-width - $sidebar-width
}
乘除
.box{
width:10px*2
}
6.sass可以進(jìn)行顏色運(yùn)算
p {
? color: #010203 + #040506;
}
編譯出來的css為
p {
? color: #050709;
}
5.sass也可以進(jìn)行字符運(yùn)算
$content :'hello'+' '+'sass'
.box:before{
? ?content : "#{$content}"
}
編譯出來的css
.box:before{
content:? "hello sass"
}
