根据变量使用特定的 Sass 地图

Question

我运行遇到了一个问题，我更容易定义两个可以在使用单个变量之间切换的底图（对于底图，light/dark 主题似乎更容易）

https://codepen.io/anon/pen/bLwNaW

我正在尝试设置 $theme-being-used，在 If/Else 中检查它并根据该结果使用特定地图。这让我很容易进入并将 $theme-being-used 设置为黑暗并更改所有基本变量。

我试过：

@if (#{$theme-being-used} == light) {

@if ($theme-being-used == light) {

@if (#{$theme-being-used} == "light") {, etc..

有谁知道这是否可以做到？这两种方式都没什么大不了的，只是在抛出模板网站时节省了一点时间。

在我通过简单的 comment/uncommenting 代码实现之前，即

$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
    ),*/
);

这很好而且很快，但是将它设置在一个地方会更容易，而不必这样做。

谢谢。

Answer 1

将$theme-being-used检查到_palette功能。这个函数只有一个参数——颜色名称。并在其内部包含所有颜色 select 逻辑。

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

根据变量使用特定的 Sass 地图

Use a particular Sass map depending on variable

css

sass

sass-maps