用于在 html 中着色的 sass 类 [关闭]答案

【问题标题】：sass classes for colorizing in html [closed]用于在 html 中着色的 sass 类 [关闭]
【发布时间】：2016-01-20 23:24:50
【问题描述】：

我想创建 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 而不是只有背景颜色应该是黑色。

如果我只使用.black，那么应该只使用字体颜色。

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

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

【问题讨论】：

你有没有尝试过？有什么吗？
是吗？还是你的意思是第一个答案？
在问这个问题之前，你没有表明你已经尝试过任何东西，这只是一个“为我写代码”的请求。我们在这里不这样做。努力解决你的问题。你有没有想过输出应该是什么？
好吧，我认为你错了。我要求一个 SASS 函数，我可以用它来改进我的代码。建议的 mixin 以更重的代码结束，所以我不会使用它。我没有要求现成的解决方案，只是为了函数名称，这将引导我进入文档中的正确章节
我们在这里也不做“建议”或“提示”。 Sass 文档是单页的，您可以自己阅读。

标签： html css sass

【解决方案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); 
        }
    }
}

【讨论】：

这正是我想要的，非常感谢！
没问题，欢迎投票！

【解决方案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);
  }
}

【讨论】：

我认为这个问题更多地与如何构造类和名称以获得所需的效果有关，然后是如何编写 mixin...
看起来很有希望，但我最终会编写比我上面的帖子更多的代码