根据选择器在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就是答案.(正如我所写,变量不起作用.)

@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);
}

SCSS 编译成这个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

如果你真的想要搞怪,你也可以在一个变量中定义不同的颜色方案,例如$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在你的选择,你可以只指定一个混合content($main, $default)并调用它内部@each使用nth,就像在上面的代码,但问题是你不具备写出来的每一条规则你的课程.

编辑关于在Sass和Merge字符串中动态创建或引用变量以及使用SASS将变量引用到变量,有很多有趣的答案.

Answer 3

正如 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它将是 $red-cosmo 默认颜色。