正文类更改时如何更改 sass 导入文件答案

【问题标题】：How to change sass import file when body class is changing正文类更改时如何更改 sass 导入文件
【发布时间】：2021-01-11 20:32:24
【问题描述】：

当正文中的类发生变化时，有什么方法可以用颜色变量更改 scss 文件？

我的意思是当我有 html 时：

<body class="custom"> ... </body>

我想在 style.scss 中加载

@import 'custom';

当我有

<body class="dark-mode"> ... </body>

我想在 style.scss 中加载

@import 'dark-mode';

【问题讨论】：

这能回答你的问题吗？ Change all variable value based on body class

标签： css import sass

【解决方案1】：

您不能根据条件创建@import，但是还有很多其他可能的方法。这是我当时写的一个小框架。

@function keyFilter($iKey, $fKey, $rKey) {
  @if ($iKey == $fKey) {
    @return $rKey;
  }
  @return $iKey;
}

@function v($key) {
  @return var(--#{$key});
}

//

$modes: (
  "&": (
    "color": #000,
  ),
  "dark": (
    "color": #fff,
  ),
);

//

@each $key, $map in $modes {
  body#{keyFilter("[#{$key}]", "[&]", null)} {
    @each $key, $value in $map {
      --#{$key}: #{$value};
    }
  }
}

要“注册”一个新模式，只需在$modes-map 中嵌套另一个地图，您可以添加任意数量的模式。请记住，"&"-mode 代表默认模式。

$modes: (
  "&": (
    //...
  ),
  "dark": (
    //...
  ),
  //...
);

要注册一个新的模式相关变量，只需将键和值输入到相应的模式。

$modes: (
  "&": (
    "color": #000,
    "bgc": #fff,
    "bgc-contrast": #eee,
    //...
  ),
  "dark": (
    "color": #fff,
    "bgc": #000,
    "bgc-contrast": #424242,
    //...
  ),
);

要调用变量，只需使用v($key) 函数。

body {
  color: v(color);
  background-color: v(bgc);
}

div.contrasted {
  background-color: v(bgc-contrast);
}

本次编译为：

body {
  --color: #000;
  --bgc: #fff;
  --bgc-contrast: #eee;
}

body[dark] {
  --color: #fff;
  --bgc: #000;
  --bgc-contrast: #424242;
}

body {
  color: var(--color);
  background-color: var(--bgc);
}

div.contrasted {
  background-color: var(--bgc-contrast);
}

注意：您不需要为每种模式声明每个变量。如果未找到当前模式的变量，则不会引发错误。

例如：This...

$modes: (
  "&": (
    //...
  ),
  "dark": (
    "color": #fff,
    "bgc": #000,
    "bgc-contrast": #424242,
    //...
  ),
);

//...

body {
  color: v(color);
  background-color: v(bgc);
}

div.contrasted {
  background-color: v(bgc-contrast);
}

...完全没问题。

【讨论】：