sass的环境安装 vscode插件二选一:
一变量
1.1变量声明
$变量名:变量值;
例如:
$bg_color: blue;
1.2变量引用
例如:
$bg_color: blue;
p {
color:$bg_color
}
1.3 中划线下划线
$bg_color: blue;
p {
color: $bg-color ; //中划线或下划线都是兼容的
}
二嵌套规则
2.1 父选择器标识符 &
2.2 群组选择器的嵌套
2.3 层次选择器
2.4属性的嵌套
三sass文件的引入
3.1默认变量值
!default
使用方法
/*默认值变量值*/
$bg-color: blue !default;
3.2嵌套导入
@import把SASS样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的SASS文件,并不需要生成对应的独立css文件,这样的SASS文件称为局部文件。SASS局部文件的文件名以下划线开头。SASS就不会在编译时单独编译这个css文件
例如: