时间戳

首页 > 解决方案 > 正文类更改时如何更改 sass 导入文件

css - 正文类更改时如何更改 sass 导入文件

问题描述

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

我的意思是当我有 html 时：

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

我想加载 style.scss

@import 'custom';

当我有

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

我想加载 style.scss

@import 'dark-mode';

标签： cssimportsass

解决方案

您不能@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);
}

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

例如：这...

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

//...

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

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

……完全没问题。

推荐阅读