1.scss与less都是css的预处理器，首先我们的明白为什么要用scss与less，因为css只是一种标记语言，其中并没有函数变量之类的，所以当写复杂的样式时必然存在局限性，不灵活，而scss与less正好为css提供这些，让css可以像编程一样灵活书写样式，而且scss与还提供了一些css兼容性的处理，所以运用scss就不需要像写css时队友的语法需要做hack处理。SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。
2.本文我们只对scss介绍，其实less都差不多，当你使用scss语法是要用.scss后缀，使用sass语法时用.sass后缀。
3.在vue项目中的使用：
- 安装：在命令行中输入：npm install node-sass sass-loader --save-dev
- 在样式中声明使用scss:<style lang=scss scoped><style>（到这里就可以愉快的使用scss语法了）
- 注：在webpack.config.js中不需要配置使用sass-loader，因为vue-loader会自动解析
4. scss常用语法简介：
1.自定义变量以及子元素书写：
<style lang=scss scoped>
/*scss的使用:*/
/*1.自定义变量*/
$color:pink;
$width:200px;
$height:200px;
$right:right;
$num:;
.test{
background:$color;
width:$width;
height:$height;
margin:30px auto;
/*插入变量*/
border-#{$right}:2px solid blue;
/*子元素的书写 选择器嵌套*/
p{
color:orange;
font-size: 30px;
}
}
2.样式的加减乘除以及继承样式：
.p{
background:yellowgreen;
}
.test2{
/*样式的加减乘除，自定义变量再使用*/
width:$num*100px;
height:$num*50px;
border:(1px+1px) solid orange;
/*样式的继承*/
@extend .p;
}
3.样式的复用：
/*代码的复用,相当于自定义一个函数，并且可以 传参*/
@mixin box($height){
height:$height;
width:200px;
border:1px solid deeppink;
}
.test3{
/*调用*/
@include box(200px);
}
4.使用if语句：
/*使用if语句判断使用哪套样式，lightness是scss中的一个函数，用来判断色彩度，$color为传入的自定义参数*/
.test4{
@if lightness($color)<%{
width:50px;
height:50px;
background:cyan;
}@else{
width:50px;
height:50px;
background:yellow;
}
}
5.scss的三种循环：for while each：
/*循环语法，包括最常见的三种循环方法，for,while,each,*/
/*其中循环包含开始不包含结束量,如下不包含5*/
@for $i from to {
.R#{$i}{
width:$i*20px;
height:$i*20px;
/*注意:变量带单位时不能写成($i)px;应该写:#{$i}px*/
border:#{$i}px solid olive;
}
}
6.scss中的函数：
/*函数使用*/
@function double ($num){
@return $num*
}
.test5{
font-size: double(20px);
color:gold;
}