sass/scss 的混入与继承

背景

根据枚举值渲染不同的标签内容，并且标签样式不同是很常见的效果，效果如下：

在vue开发中常见的方法，第一种，在template模板中根据枚举值做一层层判断设置样式或者不同的类名；第二种，在枚举值字典每一项再加一个对应的颜色枚举，再写个方法去根据枚举值去匹配出颜色设置在样式上。这样会比直接在模板上做一层层判断好一些，也是最常见的。其实，sass/scss可以很方便的实现，并且结合sass的继承(extend)或者混入（mixin）能很方便的实现这个效果。

代码示例

模板部分template

<el-table-column prop="identity" label="身份" width="180">
      <template slot-scope="scope">
        <span :class="`identity-${scope.row.identity}`">
          //匹配出字典label文字
          {{ getLabelFromDicList(identityDic, scope.row.identity) }}
        </span>
      </template>
    </el-table-column>

数据与字典data

tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王大虎',
          identity: '05',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-01',
          name: '王小虎',
          identity: '01',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 3,
              date: '2016-05-01',
              name: '王小虎',
              identity: '02',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [
                {
                  id: 4,
                  date: '2016-05-01',
                  name: '王小虎',
                  identity: '03',
                  address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                  id: 5,
                  date: '2016-05-01',
                  name: '王小虎',
                  identity: '03',
                  address: '上海市普陀区金沙江路 1519 弄'
                }
              ]
            },
            {
              id: 6,
              date: '2016-05-01',
              name: '王小虎',
              identity: '04',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        }
      ],
      identityDic: [
        { label: '校长', value: '01' },
        { label: '教导主任', value: '02' },
        { label: '班主任', value: '03' },
        { label: '学生', value: '04' },
        { label: '保安', value: '05' }
      ]

混入（mixin）实现

// 定义公共部分样式混入
@mixin identity {
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}
// 定义颜色列表变量
$identityColors: red, green, blue, skyblue, pink;
// 遍历
@for $i from 1 through length($identityColors) {
  .identity-0#{$i} {
    // 引入
    @include identity;
    color: #fff;
    background-color: nth($identityColors, $i);
  }
}

继承（extend）实现

%identity {
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

$identityColors: red, green, blue, skyblue, pink;
@for $i from 1 through length($identityColors) {
  .identity-0#{$i} {
    @extend %identity;
    color: #fff;
    background-color: nth($identityColors, $i);
  }
}

两者都能用差不多行数的样式代码实现，但其实两者是有区别的。

区别

虽然混入和继承都可以用来减少重复代码，但它们之间有一些重要的区别：

1. 输出 CSS 的方式：

   • 混入会将混入的样式复制到引用混入的地方，生成重复的 CSS 代码。
   • 继承会生成基于继承关系的单一选择器，以减少生成的 CSS 代码量。

2. 语义上的区别：

   • 混入通常用于包含一组相关的样式，而这些样式可能在不同的地方被用到。
   • 继承通常用于创建一个选择器，继承另一个选择器的所有样式，以便在语义上保持一致性。

3. 适用场景：

   • 使用混入时，你可以在同一个选择器中引入多个不同的混入，灵活地组合样式。
   • 使用继承时，你通常是为了将一组样式应用到多个选择器中，以保持代码的一致性和易读性。

总的来说，混入和继承都是优秀的 Sass 功能，但在不同的场景下使用它们可以带来不同的好处。