一.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: #fff
color: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(ri
ght,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.内置函数
切换主题可参考: