Question

我想创建sass类，例如.blue和.bg，但根据我使用的颜色，它应该着色字体和/或背景。

// Classes for colorizing elements

.blue {
  color: $primary-color;
  &.bg {
    background-color: $primary-color;
    color: initial;
  }
}

.light-gray {
  color: $light-gray;
  &.bg {
    background-color: $light-gray;
    color: initial;
  }
}

.medium-gray {
  color: $medium-gray;
  &.bg {
    background-color: $medium-gray;
    color: initial;
  }
}

.dark-gray {
  color: $dark-gray;
  &.bg {
    background-color: $dark-gray;
    color: initial;
  }
}

.black {
  color: $black;
  &.bg {
    background-color: $black;
    color: initial;
  }
}

.white {
  color: $white;
  &.bg {
    background-color: $white;
    color: initial;
  }
}

这里使用color:inherit是重复且低效的。

例如，如果我使用.black .bg而不是ONLY，则背景颜色应为黑色。

如果我只使用.black，则只能使用字体颜色。

单独

.bg不必在这种情况下工作

我可以使用哪些SCSS / SASS元素来实现小而有效的代码？谢谢！

Answer 1

我想我理解你的问题，如果我在这里做的就是我要做的事情：

$blue: blue;
$light-grey: white-smoke;
$medium-grey: grey;

$colorList: blue, light-grey, medium-grey;
$colorListVar: $blue, $light-grey, $medium-grey;


@for $i from 1 through length($colorList) {
    .#{nth($colorList, $i)} {
        color: nth($colorListVar, $i);
        &.bg {
            color: initial;
            background: nth($colorListVar, $i); 
        }
    }
}

Answer 2

写一个mixin。它应该是这样的：

@mixin color($color, $bg) {
  @if $bg == "true" {
   color: $color;
 } @else if $bg == "false" {
   color: initial;
   background-color: $color;
 } 
}

.blue{
  @include color(blue, true);
  &.bg {
     @include color(blue, false);
  }
}

用于在html中着色的sass类

2 个答案: