处理 SCSS 颜色变量的一种巧妙方法
在我的职业生涯中，我尝试过很多不同的方法来处理 SCSS（当然也包括 CSS）中的颜色变量。
我每次都尝试不同的方法来处理它们，但最终，我找到了一种很棒的方法。
问题
不同主题颜色管理的问题在于命名规则。我当时用的规则大概是这样的：
$background: white;
$primary: magenta;
$secondary: lawngreen;
$light: #FFF;
$dark: #000;
[...]
html {
background-color: $background;
color: $dark; /** white on black */
}
这种方法存在一些局限性，尤其是在使用不同的主题调色板时。有时，在深色和浅色主题之间切换并不意味着浅色或背景色一定与相反的主题形成对比，例如：
/** LIGHT THEME */
$background: black;
$primary: magenta;
$secondary: lawngreen;
$light: #FFF;
$dark: #000;
/** DARK THEME */
$background: white;
$primary: magenta;
$secondary: lawngreen;
$light: #FFF;
$dark: #000;
[...]
html {
background-color: $background;
color: $dark; /** black on black with dark theme */
}
如您所见，如果您没有正确设置变量和/或 CSS 属性，就会出现意想不到的行为。
解决方案
在我的职业生涯中，我尝试过很多不同的解决方案来解决主题相关的这些问题。目前为止，我发现最好的方案如下：
/** CONTRAST VARIABLES */
$<variable-name>: black;
$on-<variable-name>: white;
这种方法允许您定义一个颜色变量及其对比颜色变量。
因此，如果我们定义两个不同的主题，就更容易理解和写作：
/** LIGHT THEME */
$background: black;
$on-background: white;
$primary: lawngreen;
$on-primary: black;
/** DARK THEME */
$background: white;
$on-background: black;
$primary: lawngreen;
$on-primary: black;
[...]
html {
background-color: $background;
color: $on-background; /** black on white with dark theme */
}
该系统允许您使用对比色定义每个变量，从而更好地组织您的主题和样式。
该系统的另一个很棒的优点是其逆向状态，例如：
[...]
pre {
background-color: $primary;
color: $on-primary;
&.reversed {
background-color: $on-primary;
color: $primary;
}
}
简单！就这么简单！
结论
这是定义 SCSS（和 CSS）变量的一种很棒的方式，我在不同的生产项目中使用这个系统，创建新主题非常容易。
你对此有何看法？你有没有更好的处理方法？如果有，请在评论区告诉我！
文章来源：https://dev.to/nicolalc/a-cool-way-to-handle-scss-color-variables-3njp