Vue 使用scss 注意事项

一.vue 使用scss 避免入坑

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

cnpm i [email protected] [email protected] [email protected] -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.内置函数

切换主题可参考：

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