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来声明一个混合宏 类似 CSS 中的 @media@font-face 一样
@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}
混合宏的参数传多个参数可以把公共的用混合宏写，其余的css需要的时候直接调用就可以,可以复用重复代码块。但其最大的不足之处是会生成冗余的代码块
@mixin size($width,$height){
width:$width;
height:$height;
}
.box-size{
@include size(300px,500px)
}
3.sass继承,@extend”来继承已存在的类样式块，从而实现代码的继承
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary { background-color: #f36; color: #fff;@extend.btn;}
4.sass可以进行加减乘除,前提是必须是相同类型的单位
加减:
$full-width:960px
$sidebar-width:200px
.content {
width: $full-width - $sidebar-width
}
乘除
.box{
width:10px*2
}
6.sass可以进行颜色运算
p {
color: #010203 + #040506;
}
编译出来的css为
p {
color: #050709;
}
5.sass也可以进行字符运算
$content :'hello'+' '+'sass'
.box:before{
content : "#{$content}"
}
编译出来的css
.box:before{
content: "hello sass"
}
网友评论