sass-笔记

使用$符号来标识变量 例如：$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

 

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{

  test: /\.sass$/,

  loaders: ['style', 'css', 'sass']

}

 

修改style标签：<style lang="scss">

转载于:https://www.cnblogs.com/txhy/p/10638473.html