Question

我正在寻找一种方法来使用特定颜色，具体取决于身体标签上的类别。

我有一个像这样的主要scss文件

// variables.scss
$bg-main:      white;
$color-first:  red;
$color-second: green;

在我的其他文件中，我使用颜色

// content.scss
.content {
     .some-selector: {
         // some styles
         color: $color-second;
     }
     a:hover {
         // some styles
         color: $color-second;
     }
}    

// and same goes for menu.scss etc.

现在我的身体上有一个动态类，它会根据当前选定的菜单而改变。我希望$ color-second对于每个身体类都不同，我不知道该怎么做。我找到的唯一解决方案是将每个文件的所有$ color-second移动到一个文件中，如下所示：

.body-1 {
    .content a:hover, .content .some-selector {
        color: green;
    }
}
.body-2 {
    .content a:hover, .content .some-selector {
        color: blue;
    }
}
.body-1 {
    .content a:hover, .content .some-selector {
        color: black;
    }
}

所以我不需要在每个文件中写下颜色。这很好用，但是如果我需要将这个$ color-second设置为其他选择器，我需要把它放在这个大文件中。

这可能是另一种方式吗？

我已经检查了这些答案，但这对我没有多大帮助：

Answer 1

有多种方法可以做到这一点。想到的最明显的两个是mixins和循环：

混入

只需将您想要的所有内容放入一个mixin中，然后将其用于每个body类：

@mixin colored-content($color) {
  .content a:hover, .content .some-selector {
      color: $color;
  }

  /* Any other rules which use $color here */
}

.body-1 {
  @include colored-content(green);
}

.body-2 {
  @include colored-content('#FF0000');
}

.body-3 {
  @include colored-content(darken(red, 20));
}

您可以使用任意数量的参数（例如，$textColor和$bgColor），条件或规则扩展此示例。

使用这种方法，您将不会重复SCSS代码，并且将轻松引入任何更新。

循环

另一种方法是使用一个简单的循环：

$body_themes: (
    "body-1": green,
    "body-2": #FF0000,
    "body-3": darken(red, 2)
);

@each $body_class, $color in $body_themes {
  .#{$body_class} {
    .content a:hover, .content .some-selector {
      color: $color;
    }

    /* Any other rules which use $color here */
  }
}

它甚至更短，但不太可读。

P.S。顺便说一句，可以将mixins和循环结合起来：）

根据需要设置SASS变量

1 个答案:

混入

循环