scss 语法：  https://blog.csdn.net/wang13679201813/article/details/125629701

sass 官网： https://www.sass.hk/docs/

想通过 scss 定义两套颜色，实现不同颜色主题的配置，利用 scss 的 map 和 @each 循环实现

代码如下：

<template>
  <div>
    <div v-for="c in classlist" :key="c" :class="c">
      <el-divider content-position="left">{{ c }} 主题颜色</el-divider>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <div></div>
      <el-input placeholder="请输入内容" v-model="input" :disabled="true">
      </el-input>
      <div></div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      classlist: ['green', 'red'],
    }
  },
}
</script>

<style lang="scss" scoped>
$classs: (
  'red': (
    '$bg': #f1c2c7,
    '$border': #eb3737,
  ),
  'green': (
    '$bg': #aafaaa,
    '$border': #32810a,
  ),
);
@each $c, $colors in $classs {
  .#{$c} {
    ::v-deep {
      &.el-button--primary {
        background: map-get($colors, '$bg');
        border-color: map-get($colors, '$border');
      }
      &.el-input.is-disabled .el-input__inner {
        background-color: map-get($colors, '$bg');
        border-color: map-get($colors, '$border');
      }
      &.el-table.el-table--striped
        .el-table__body
        tr.el-table__row--striped
        td.el-table__cell {
        background-color: map-get($colors, '$bg');
      }
      &.el-divider {
        .el-divider__text {
          color: map-get($colors, '$border');
        }
      }
    }
  }
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.

效果如下：

利用 scss 数组实现不同颜色主题的设置_scss