一.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博客