时间戳

首页 > 解决方案 > 如何根据 sass 中的选择器更改变量

css - 如何根据 sass 中的选择器更改变量

问题描述

我想在我的项目中切换主题，并且我使用 sass 作为我的 css 预处理器。我已经为一个主题声明了所有变量，我想根据选择器更改声明变量的值。我目前的代码：

$nightSelector: '.night';
$daySelector: '.day';

#{$nightSelector} {
    $headerBgColor: #333;
}
#{$daySelector} {
    $headerBgColor: #f3f4f8;
}
header {
    background: $headerBgColor;
}

使用未定义的 $headerBgColor 获取编译错误。有什么正确的方法可以做到这一点吗？或者，提供任何解决方案来完成它。我是 vue 作为我的前端框架。提前致谢。

标签： csssassvuejs2themesnode-sass

解决方案

SCSS 变量是静态的（用于生成 CSS 输出），为什么您不能使用它们根据上下文动态更改值（这是 CSS 变量的工作）。

示例 1 – 仅 SCSS 变量

SCSS

$nightSelector: '.night';
$daySelector  : '.day';

header {
    #{$nightSelector} &,
    &#{$nightSelector} { background: #333; }

    #{$daySelector} &, 
    &#{$daySelector} { background: #f3f4f8; }

}

CSS 输出

.night header, header.night {
  background: #333;
}
.day header, header.day {
  background: #f3f4f8;
}

HTML

<header class="night">Lorem</header>
<header class="day">Lorem</header>

<body class="night">
  <header>Lorem</header>
</body>

<body class="day">
   <header>Lorem</header>
</body>

示例 2 – SCSS + CSS 变量

SCSS

$nightSelector: '.night';
$daySelector: '.day';

#{$nightSelector} {
    --header-bg-color: #333;
}
#{$daySelector} {
    --header-bg-color: #f3f4f8;
}
header {
    background: var(--header-bg-color);
}

CSS 输出

.night {
    --header-bg-color: #333;
}
.day {
    --header-bg-color: #333;
}
header {
    background: var(--header-bg-color);
}

HTML

<header class="night">Lorem</header>
<header class="day">Lorem</header>

<body class="night">
  <header>Lorem</header>
</body>

<body class="day">
   <header>Lorem</header>
</body>

推荐阅读