样式写法scss,方便简单减少代码

1.循环each遍历

<style lang="scss" scoped>
    $position: right, left, center;
    @each $p in $position {
          .text-#{$p}{
              text-align: $p;
            }
    }
</style>

image.png

<style lang="scss" scoped>
    @each $header, $size in (h1: 1.5em, h2: 1em, h3: 0.5em) {
  #{$header} {
    font-size: $size;
  }
}
</style>

image.png

2.插值 #{} 通过插值语句可以在选择器或属性名中使用变量。

image.png

<style lang="scss" scoped>
    @each $header, $size in (h1: 1.5em, h2: 1em, h3: 0.5em) {
  #{$header} {
    font-size: $size;
  }
}
</style>

3.选择器继承 @extend

image.png

4.混合器@mixin和@include

<style lang="scss" scoped>
@mixin setBg($url: default, $size: 100% 100%, $posion: center) {
  background: $posion / $size url('~@/assets/images/'+$url+'.png') no-repeat;
}

.content{
  width: 640px;
  height: 300px;
  @include setBg('22');
}
</style>

image.png