Question

我想在项目中切换主题，并且我已经使用sass作为我的CSS预处理程序。我已经声明了主题的所有变量，并且我想基于选择器更改已声明变量的值。我当前的代码：

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

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

由于未定义$ headerBgColor而导致编译错误。有什么正确的方法吗？或者，提供任何解决方案来实现它。我很想作为我的前端框架。预先感谢。

Answer 1

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>

如何基于sass中的选择器更改变量

1 个答案: