sass的变量声明、嵌套和引入

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文件

例如：