如何根据根选择器有条件地设置scss变量值
我想根据body标记的选择器更改变量的值 例如:如何根据根选择器有条件地设置scss变量值,css,sass,scss-mixins,Css,Sass,Scss Mixins,我想根据body标记的选择器更改变量的值 例如: $body-bg: green; $text-color: red; $border-style: grey; body{ background:$body-bg; color: $text-color; } 如果主体具有“dark”类,则变量值应该有条件地更改为如下内容: $body-bg: black; $text-color: white; 不幸的是,在不同的文件中有很多覆盖。所以我不能覆盖所有地方。因此,在我的场景中,唯一的
$body-bg: green;
$text-color: red;
$border-style: grey;
body{
background:$body-bg;
color: $text-color;
}
如果主体具有“dark”类,则变量值应该有条件地更改为如下内容:
$body-bg: black;
$text-color: white;
不幸的是,在不同的文件中有很多覆盖。所以我不能覆盖所有地方。因此,在我的场景中,唯一的方法是根据选择器覆盖变量的值。不能使用Sass变量,但可以使用CSS自定义变量。不能使用Sass变量,但可以使用CSS自定义变量。
$_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);
}