关于sass

在css语法的基础上增加了变量、嵌套、混合、导入等高级功能
sass文件后缀有两个， 一个是.sass 另一个是.scss
区别：
1 .sass没有{} 和 ;
2 .sass都是通过换行或空格体现层级关系
浏览器不能直接识别sass语法，需要一款sass编译工具
sass工具下载：
命令行输入指令： npm i sass -g
查看是否安装成功： sass --version
使用sass编译文件（sass或scss）
实时编译一个sass文件：
指令：sass --watch sass文件:css文件
实时监控一个文件夹中的sass文件并编译：
指令：sass --watch sass文件夹:css文件

在scss可使用变量 $变量名

变量赋值： $color:red;
可直接使用：$color
选择器的使用：#{变量名}

全局变量:
$bgc:pink;
#div{
width: 200px;
height: 200px;
background-color: $bgc;
//里面定义的是局部变量
}

scss中的嵌套：
父子嵌套：

/* 父子嵌套 */
#div{
  width: 200px;
  height: 200px;
  background-color: skyblue;
  // 这样是后代嵌套
  // #dv{
  //   width: 100px;
  //   height: 100px;
  //   background-color: pink;
  // }
  // 这样是父子嵌套
  >#dv{
    width: 100px;
    height: 100px;
    background-color: pink;
  }
}

scss中的嵌套

scss中的混合器

继承样式


导入变量和混合器的文件import.scss：


import.scss中的默认值：

变量的文件夹: var.scss

混合器的文件夹：mixin.scss