如何根据根选择器有条件地设置 scss 变量值答案

【问题标题】：How to set scss variable value conditionally depending on root selector如何根据根选择器有条件地设置 scss 变量值
【发布时间】：2019-04-02 20:15:10
【问题描述】：

我想根据body标签的选择器改变变量的值。

例如：

$body-bg: green;
$text-color: red;
$border-style: grey;

body{
  background:$body-bg;
  color: $text-color;
}

如果主体具有“黑暗”类，则变量值应有条件地更改为类似这样：

$body-bg: black;
$text-color: white;

不幸的是，不同的文件中有很多覆盖。所以我不能在所有地方都覆盖。所以在我的场景中，唯一的方法是根据选择器覆盖变量的值。

【问题讨论】：

你不能用 Sass 变量做到这一点，但你可以用 CSS 自定义变量。

标签： css sass scss-mixins

【解决方案1】：

$_contrast-low :     $_color-black !default;

$_contrast-high :    $_color-white !default;

// Find the best contrast color compared to a color
@function get-contrast-text($base-color) {

  $color-brightness: round((red($base-color) * 299) + (green($base-color) * 587) + (blue($base-color) * 114) / 1000);
  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);

  @if abs($color-brightness) < ($light-color/2){
    @return $_contrast-high;
  }

  @return $_contrast-low;
}

你可以使用：

$my-color: #fff;
.hello {
    background : $my-color;
    color:  get-contrast-text($my-color);
}

【讨论】：