scss用法

在项目中使用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