我遇到了一个问题,我更容易定义两个可以在使用单个变量之间轻弹的基本地图(对于基本,轻/黑暗主题似乎更容易(
https://codepen.io/anon/pen/blwnaw
我正在尝试设置使用$主题,请在if/else中检查它,并根据该结果使用特定的地图。这使我很容易进入并将$ them-them-ebeing-be-the设置为黑暗并更改所有基本变量。
我尝试过:
@if (#{$theme-being-used} == light) {
@if ($theme-being-used == light) {
@if (#{$theme-being-used} == "light") {, etc..
有人知道这是否可以做到吗?这并不是什么大事
在我通过简单地评论/不计费代码来实现这一目标之前,即
$palette: (
// Light
ui: (
primary: #FFFFFF,
secondary: #EEEEEE,
alternate: #DDDDDD
),
// Dark - COMMENTED when I want to use light variables
/*ui: (
primary: #333,
secondary: #444,
alternate: #555
),*/
);
这很好而且很快,但是将其设置在一个地方而不必这样做会更容易。
谢谢。
放置$theme-being-used
检查到_palette
功能。此功能仅采用一个参数 - 颜色名称。并包含所有颜色的选择逻辑。
sassmeister demo。
$theme-being-used: light;
$palette: (
dark: (
primary: red,
secondary: orange,
tertiary: blue
),
light: (
primary: green,
secondary: black,
tertiary: yellow
)
);
@function _palette($color-name, $theme-name: $theme-being-used) {
// Select one of available themes
// Here there may be more complex logic in choosing themes
$theme: map-get($palette, #{$theme-name});
// Get the color from theme
@return map-get($theme, #{$color-name});
}
.s-o {
background: _palette(primary);
&:hover {
background: _palette(secondary);
}
}