根据选择器在 Sass 中设置变量

Question

我的网站使用了几种不同的“主要”颜色。一般的 HTML 布局保持不变，只是颜色会根据内容而变化。

我想知道是否可以根据 CSS 选择器设置颜色变量。这样我就可以用一些变量为我的网站设置主题，然后让 Sass 填充颜色。

例如：

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  color-default: $color-1;
  color-main: $color-2;
}
body.class-2 {
  color-default: $color-3;
  color-main: $color-4;
}

/* content CSS */
.content {
  background: $color-default;
  color: $color-main;
}

我正在考虑为此使用 mixin，但我想知道是否有更好的方法来做到这一点 - 也许使用函数？我对 Sass 不是很好，因此我们将不胜感激。

Answer 1

我认为mixin 是答案。 （As I wrote，变量不起作用。）

@mixin content($color-default, $color-main) {
  background: $color-default;
  color: $color-main;
}

body.class-1 {
  @include content(#444, #555);
}

body.class-2 {
  @include content(#666, #777);
}

那个SCSScompiles to这个CSS：

body.class-1 {
  background: #444444;
  color: #555555; }

body.class-2 {
  background: #666666;
  color: #777777; }

如果您想在 SCSS 文件中将颜色值组合在一起，您可以将变量与 mixin 结合使用：

$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;

body.class-1 {
  @include content($color-1, $color-2);
}

body.class-2 {
  @include content($color-3, $color-4);
}

Answer 2

如果您不想为每种颜色使用一个变量，您可以为所有种类的颜色使用一个变量。在 mixin 中，您可以使用 nth 选择正确的颜色。例如，如果您将颜色的索引写为1，那么您将获得颜色变量中的第一个颜色。

$colors: #444, #555, #666, #777;

@mixin content($color-default-num, $color-main-num) {
  background: nth($colors, $color-default-num);
  color: nth($colors, $color-main-num);
}

body.class-1 {
  @include content(1, 2);
}

Answer 3

如果您真的想搞怪，您还可以在单​​个变量中定义不同的配色方案，例如$scheme1: class1 #333 #444，其中第一个值始终是名称，然后是该方案中的所有颜色。

然后你可以使用@each:

// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;

// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;

@each $scheme in $schemes {
  // Here are the rules specific to the colors in the theme
  body.#{nth($scheme, 1)} .content {
    background-color: nth($scheme, 2);
    color: nth($scheme, 3);
  }
}

这将编译为：

body.class1 .content {
  background-color: #444444;
  color: #555555; }

body.class2 .content {
  background-color: #666666;
  color: #777777; }

body.class4 .content {
  background-color: #888888;
  color: #999999; }

显然，如果您不想在选择器中组合 body.class1 和 .content，您可以指定一个 mixin content($main, $default) 并使用 @each 在 @each 中调用它，就像在上面的代码中一样，但关键是你没有必须为你的每个类写出规则。

编辑在Creating or referencing variables dynamically in Sass 和Merge string and variable to a variable with SASS 上有很多有趣的答案。

Answer 4

您还可以创建使用 & 父选择器的混合。 http://codepen.io/juhov/pen/gbmbWJ

@mixin color {
  body.blue & {
    background: blue;
  }
  body.yellow & {
    background: yellow;
  }
}

Answer 5

您可以简单地在类包装器中覆盖您的 scss 变量：

$color1: red;
$color2: yellow;

header { background: $color1; }

.override-class {
  $color1: green;
  header { background: $color1; }
}

似乎对我有用。

Answer 6

更新：它的 2017 年和变量确实有效！

@mixin word_font($page) {
  @font-face {
    font-family: p#{$page};
    src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .p#{$page} {
   font-family: p#{$page};
  }
}

// Loop and define css classes 
@for $i from 1 through 604 {
 @include word_font($i);
}

Answer 7

对我来说，我的问题的明确答案是创建一个地图地图并通过它们循环如下：

$pallettes: (
  light-theme: (
    container-color: red,
    inner-color: blue,
  ),
  dark-theme: (
    container-color: black,
    inner-color: gray,
  ),
);

@each $pallette, $content in $pallettes {
  .main.#{$pallette} {
    background-color: map-get($content, container-color);
    .inner-div {
      background-color: map-get($content, inner-color);
    }
  }
}

Answer 8

sass 文档解释得很好 (https://sass-lang.com/documentation/variables)：

• Sass 变量都被 Sass 编译掉了。 CSS 变量包含在 CSS 输出中。

• CSS 变量对于不同的元素可以有不同的值，但 Sass 变量一次只有一个值。

• Sass 变量是命令式的，这意味着如果你使用一个变量然后改变它的值，之前的使用将保持不变。 CSS 变量是声明性的，这意味着如果您更改值，它将影响早期使用和后期使用。

我们可以利用 sass 和 css 变量的组合来实现您想要的：

//theme colors
$red-cosmo: #e01019;
$green-cosmo: #00c398;
$primary-color: var(--primary-color);
body{
  --primary-color: #{$red-cosmo};
}
body.univers-ride{
  --primary-color: #{$green-cosmo};
}

所以当我调用我的 sass 变量 $primary-color 时，它将打印为我的 css 变量“var(--primary-color)”，仅当我的身体有“univers-ride”时才会扩展为 $green-cosmo " class 否则它将是 $red-cosmo 默认颜色。