一.vue 使用scss 避免入坑

1.先安装scss 依赖的包,一定要注意版本!!!

cnpm i node-sass@7.0.1 sass@1.49.9 sass-loader@10.1.0 -S

二. scss的使用

1.选择器嵌套

.con {color: red;&-left {font-size: 20px;}
}//编译后
.con {color: red;
}
.con-left {font-size: 20px;
}

2.父类 &，属性嵌套font: {size:14px,weight:bold}

.con {color: red;font: {size: 20px;weight: bold;}
}// 编译后
.con {color: red;font-size: 20px;font-weight: bold;
}

3.占位符嵌套 %base @extend %base
 

%base {color: red;
}p {@extend %base;
}
// 编译后得
p {color: red;
}.base {color: red;
}p {@extend .base;
}// 编译后得
.base, p { // .base是无用得不需要，可以去掉 故采用%base得方式color: red;
}

4.变量$color:red; $font-size:16px !global

.con {$font-size:16px !global
}
p {font-size:$font-size
}

5.变量类型 $:isShow:true

$isShow:true
$var:null
$color-map:(color1:#fff,color2:red)
​
p {@if $isShow {color: red}@else {color: #fffcolor:map-get($color-map,color)}
}

6._public.css 加下划线后就不会生成css文件

 7.混入@mixin ,传参 ,使用@include

作用：可以重复使用，定义时最好都加上默认值

@mixin block {color:red
}
P {@include block
}
​
//传参,默认值
@mixin block($val:'yellow') {color:$val
}
P {@include block(red)@include block($val:red)
}
​
//定义线性渐变 $direction方向 $gradients颜色过度的值列表(值数量不确定)
@mixin linear-gradient($direction,$gradients...) {backgorund-color: nth($gradients,1) //列表中索引为1 的值backgorund-image: linear-gradient($direction,$gradients)
}
p {@include linear-gradient(right,red,yellow,pink)
}

8.@extend相对于混入代码更简洁、

%base { //比.base更语义化color: red;
}
​
p {@extend %base;
}
​
//编译之后的
p {color: red;
}/*# sourceMappingURL=a.css.map */

9.函数自定义 @function @return结束

@function row-cols-width($column) {@return percentage(1 / $column);
}
​
@for $i from 1 to 6 {.row-cols-#{$i} > * {width: row-cols-width($i);}
}
​
​
.row-cols-1 > * {width: 100%;
}
​
.row-cols-2 > * {width: 50%;
}
​
.row-cols-3 > * {width: 33.3333333333%;
}
​
.row-cols-4 > * {width: 25%;
}

10.for循环

@for $i from 1 to 4 {.p#{$i} {// # 连接width: 10px * $i;}
}
​
@for $i from 1 through 4 {.b#{$i} {width: 10px * $i;}
}
​
​
​
.p1 {width: 10px;
}
​
.p2 {width: 20px;
}
​
.p3 {width: 30px;
}

11.内置函数

切换主题可参考：

scss主题颜色切换_橘猫他会笑的博客-CSDN博客