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

我有一个像这样的主要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设置为其他选择器,则需要将它放在这个大文件中。

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

我已经检查了这些答案,但并没有太大帮助:


SASS set variable depending on CSS class
Creating or referencing variables dynamically in Sass
Merge string and variable to a variable with SASS

最佳答案

有多种方法可以做到这一点。我想到的最明显的两个是mixin和loops:

混合蛋白

只需将所需的所有内容放入单个mixin,然后将其用于每个身体类别:

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


它甚至更短,但是恕我直言,它的可读性较差。

附言可以通过以下方式组合mixin和循环:)

10-05 21:09
查看更多