使用$符号来标识变量 例如:$color: #F90;
子组合选择器>
同层相邻组合选择器+
同层全体组合选择器~
优势
1.无需重复书写属性值,对于有可能在项目中多次使用的属性值,可以通过声明一个公共变量去管理,这种只写一遍群组选择器大大减少了工作量
弊端
1.群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小,但实际生成的css却可能非常大,这会降低网站的速度。
2.@import 允许在一个css文件中导入其他css文件,然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。
安装:
npm install sass-loader --save-dev
npm install node-sass --save-dev
如果报错,
npm uninstall sass-loader(卸载当前版本)
npm install sass-loader@7.3.1 --save-dev (安装指定版本)
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /.sass$/,
loaders: ['style', 'css', 'sass']
}
修改style标签:<style lang="scss">