sass(scss)

在vue项目中使用的话需要安装sass依赖包

npm install sass-loader --save-dev
npm install node-sass --sava-dev

1、scss在生产环境时一般都会使用4种编译风格的最后一种压缩风格compressed
2、scss中允许使用变量，变量可以是在一个文件写，也可以通过@import引入引用
3、引用的变量必须以$开头
4、变量如果是定义属性名中的变量，在使用的时候需要将变量包在#{}中
5、scss允许使用算式

margin:($var/10);height:$var*10

6、scss允许后代选择器和属性写成嵌套形式

div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}
p {
　　	border: {
　　　		color: red;
　　	}
　}

7、在嵌套的代码中可以使用&引用父元素，比如a:hover可以写成

a{`在这里插入代码片`
	$:hover{
		background:red;
	}
}

8、scss允许继承、使用@extend .继承的属性名

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

9、scss强大之处在于支持条件循环语句

　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}
  @if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　}
　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　}

10、允许用户自定义函数

@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}