Sass
1.变量:
声明变量:$xxxx : xxxx;
使用变量:xxx: $xxx;
反复声明变量后者覆盖前者。
!default 设定默认值
Css原生变量:
声明变量:—xxx : xxx;
使用变量:xxx : var(—xxx)
可使用第二参数作为默认值
允许拼接字符串:var(—xxx)’blue’
2.嵌套规则
#content{
article{
}
h1{
p{}
}
}
3.父级标识符 &
4.属性嵌套
nav{
border-left:2px;
border-top:10px;
}
===>
nav{
border:{
left:2px;
top:10px;
}
}
5.导入sass
1.允许css导入其他css文件
2.不发起额外的请求
3.不需要指定全名,可以省略后缀
4.使用下划线开头来命名_theme.sass,使用时@import “theme.sass”
7.混合器@mixin
@mixin aname {
xxx1:xxx1;
xxx2:xxx2;
xxx3:xxx3;
xxx4:xxx4;
}
p{
xxx:xxx;
@include aname;
}
8.混合器传参(可设定默认值,默认值可以是任何有效的css属性值,甚至是其他参数的引用)
@mixin link-colors($a,$b:green){
color:$a;
font:$b;
}
a{
@include link-colors(blue,red);
}
9.选择器继承
p {
xxx1:xxx1;
xxx2:xxx2
}
.overP{
@extend p;
}