在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