设置一个 SASS 变量取决于 [英] Set a SASS variable depending

问题描述

我正在寻找一种根据 body 标签上的类使用特定颜色的方法.

I'm searching a way to use a particular color depending on a class on the body tag.

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

I have a main scss file like this

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

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

And in my other files, I use the colors

// 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 移动到一个文件中，如下所示:

Now I have a dynamic class on the body, that changes depending on the current selected menu. I would like $color-second to be different for each body classes, and I don't know how to do that. The only solution I found was to move all the $color-second from each files into one single file, like this:

.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 设置为其他某个选择器，则需要将其放入这个大文件中.

So I don't need to write the color in each files. This works well, but if I need to set this $color-second to some other selector, I need to put that in this big file.

是否可以通过其他方式做到这一点?

Is this possible to do this an other way?

我已经检查了这些答案，但对我帮助不大:

I already checked these answers, but it didn't helped me much:

• SASS 根据 CSS 类设置变量
• 在 Sass 中动态创建或引用变量
• 使用 SASS 将字符串和变量合并为变量

推荐答案

有多种方法可以做到这一点.想到的最明显的两个是混合和循环:

There are multiple ways to do this. The most obvious two which come to mind are mixins and loops:

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

Just put everything you want into a single mixin, and then use it for every body class:

@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)、条件或规则来扩展此示例.

You can extend this example with any number of arguments (for example, $textColor and $bgColor), conditions or rules.

采用这种方法，您将不会有 SCSS 代码重复，并且可以轻松引入任何更新.

With this approach you will not have SCSS code repetitions, and any updates will be introduced easily.

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

Another way is to use a simple loop:

$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 */
  }
}

它更短，但恕我直言，它的可读性较差.

It is even shorter, but imho it is less readable.

附言顺便说一下，可以结合使用 mixin 和循环 :)

P.S. It is possible to combine mixins and loops, by the way :)

这篇关于设置一个 SASS 变量取决于的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！