在项目中使用scss
1.vue项目中使用npm引入scss
npm install --save-dev sass-loader //安装scss支持
npm install --save-dev node-sass
build/webpack.base.conf.js中加入：
{
test: /.s[a|c]ss$/,
loaders: ['style', 'css', 'sass'
}
.vue文件中的style标签加入lang="scss"（仍旧支持css语法）
2.把scss引入到html中
用koala把自己编写的scss文件编译成css，然后再在自己的html文件中引入该.css文件就可以了scss基础语法
- 变量（局部/全局）声明：$+变量名：变量值；默认变量在变量名后加default，!global变成全局变量。
- 混合宏（可重用的代码块）：声明混合宏@mixin border-radius { }； 调用混合宏 @include。 border-radius; 声明的时候还可以带默认参数，调用可以传参。
- 继承： @extend .btn; 继承btn class。任何选择器都能继承，可以连续继承。
- 占位符%：占位符声明的代码如果不被@extend调用，就不会被编译产生css代码。
- 插值：#{$参数名}，插入传入或定义的参数。
- 注释：/* */ :会在编译出来的css文件中显示；//内容：不会显示。/!/：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。
- 加减法：同单位的数值之间可以做加减法。
- 乘除法：只能乘数值；如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。
- 颜色运算：算术运算都支持颜色值，并且是分段计算的，01+05=06
- 字符串连接：+，$content: "Hello" + "" + "Sass!";cursor: e + -resize；有引号的字符串和没有引号的字符串相加，以左边字符有无引号为准。
- 父类选择器：&，表示引用父元素，
- if语法：@if,@else,
- 循环语法：@for,@while,@each,
- 函数：@function double ($number){ @return $number*2; }
- import：导入其他的scss