Vue Scss的使用(二)

        在日常的开发中，我们可能有些一能够复用的style，我们不希望重复写这些样式，此时我们可以使用Scss的混合器

        一个简单的小栗子，使用scss的混合器配置button样式

@mixin btn-colors($normal, $hover){
  background-color: $normal;
  &:hover{
    background-color: $hover;
  }
}

@import 'mixinbox.scss';

.intro{
  padding: 10px;
  background-color: antiquewhite;
  .btn{
    @include btn-colors(rgb(80, 131, 198), pink)
  }
}

<template>
  <div class="box">
    <div class="intro">
      <div class="btn">import scss中的混合器配置button的颜色和选中颜色</div>
    </div> 
  </div>
</template>
<style scoped lang="scss">
@import './scss/usemixin.scss'
</style>

         一个简单的小栗子，使用混合器，scss中的条件语句，通过v-for实现一组button的不同背景色的配置，在scss中混合器与if-else条件语句一起使用，可以实现一些更复杂的页面样式

@mixin btnback($type){
  margin: 10px;
  text-align: center;

  @if $type == "one" {
    background-color: pink;
  } @else if $type == "two" {
    background-color: saddlebrown;
  } @else if $type == "three" {
    background-color: darkseagreen;
  } @else {
    background-color: dodgerblue;
  }
}

<template>
  <div class="box">
    <div class="intro" v-for="nameOne in classNames">
      <div :class="nameOne">{{ nameOne }}</div>
    </div>
  </div>
</template>
<script setup>
const classNames = ["one", "two", "three", "four"];
</script>
<style scoped lang="scss">
@import './scss/conditional.scss';
.box {
  display: flex;
  flex-direction: column;
  background-color: antiquewhite;

  .intro {
    // background-color: cadetblue;
    margin: 10px;
    padding: 15px;

    .one {
      @include btnback("one");
    } 
    .two {
      @include btnback("two");
    } 
    .three {
      @include btnback("three");
    }  
    .four {
      @include btnback("four");
    }
  } 
}
</style>