1.导入scss时可以不加后缀
在main.scss中导入header.scss和footer.scss的时候,如果不想让他生成header.css和footer.css可以将他们命名为"_header.scss" "_footer.scss",main中引用时可以不加下划线,如:
.main{@import "header";@import "footer"}
2.scss中 变量用$表示:如
$background:red;
.style{
color:$background;
}
3.注释
/**/ :这种注释方式会编译到css
// 这种注释方式不会被编译到css
$color: red!default; 静默注释 ;(当引入的外部scss文件没有变量,则使用本文件内部的变量;当外部有和本文件相同的变量则使用外部的变量)
4.混合器(mixin)(可以传递参数)
@mixin border-raduis{.......};;
@mixin links-colors($normal){
color:$normal;
}
使用:
.style{
@include border-raduis;
@include links-colors(red)
}
5.继承extend(嵌套的子css不能继承)
.center{color:red;}
.style{
@extend .center;
}
6.占位符(继承会将原先的也会编译到css文件,占位符则不会)
%center{color:red;}
.style{
@extend %center;
}