Sass应用之实现主题切换
SegmentFault
共 5764字，需浏览 12分钟
·
2022-06-24 18:03
作者：玛尔斯通
来源：SegmentFault 思否社区
背景
前置知识
variable mixin map
本质
Sass作为CSS预处理器，需要编译成CSS后，才能被浏览器识别和解析。因此无法在浏览器中直接使用Sass实现类似CSS变量那种动态切换。本质上来说，项目中有几个主题就要提前定义好几份主题样式并全部引入。
思路
<html>
<div class="app" data-theme="light"></div>
</html>
.app {
&[data-theme='light'] {
color: #333;
}
&[data-theme='dark'] {
color: #fff;
}
}
实现
基础版
<div id="app" class="app">
<h1 class="title">Hello, World</h1>
<p class="subtitle">当前主题：<span id="theme-current">亮色</span></p>
<button class="theme-switch light" data-theme="light">亮色</button>
<button class="theme-switch dark" data-theme="dark">暗色</button>
</div>
<body data-theme="light">
<div class="app"></div>
</body>// 所有主题样式
$bg-color-light: #ffffff;
$bg-color-dark: #091a28;
$title-color-light: #363636;
$title-color-dark: #ffffff;
$subtitle-color-light: #4a4a4a;
$subtitle-color-dark: cyan;
.app {
// 默认主题样式（light主题）
background-color: $bg-color-light;
// dark主题
[theme='dark'] & {
background-color: $bg-color-dark;
}
}
.title {
color: $title-color-light;
[theme='dark'] & {
color: $title-color-dark;
}
}
.subtitle {
color: $subtitle-color-light;
[theme='dark'] & {
color: $subtitle-color-dark;
}
}
每个需要应用主题样式的CSS选择器中，都要写一遍对应主题需要的样式，比较繁琐 
如果有多个主题，代码量会极具增加，并且很多都是重复的“模板代码” 
进阶版
// 所有主题样式
$bg-color: (
// 亮色
light: #fff,
// 暗色
dark: #091a28
);
$title-color: (
light: #363636,
dark: #ffffff
);
$subtitle-color: (
light: #4a4a4a,
dark: cyan
);
@mixin themify($key, $valueMap) {
// 默认主题
#{$key}: map-get($valueMap, 'light');
// dark主题
[theme='dark'] & {
#{$key}: map-get($valueMap, 'dark');
}
}
.app {
@include themify('background-color', $bg-color);
}
.title {
@include themify('color', $title-color);
}
.subtitle {
@include themify('color', $subtitle-color);
}
@mixin themify($key, $valueMap) {
// light主题
#{$key}: map-get($valueMap, 'light');
// dark主题
[theme='dark'] & {
#{$key}: map-get($valueMap, 'dark');
}
// dark1主题
[theme='dark1'] & {
#{$key}: map-get($valueMap, 'dark1');
}
// dark2主题
[theme='dark2'] & {
#{$key}: map-get($valueMap, 'dark2');
}
}
@mixin themify($key, $valueMap) {
// theme list
$themes: light, dark;
@each $theme in $themes {
[theme=#{$theme}] & {
#{$key}: map-get($valueMap, $theme);
}
}
}
https://codepen.io/Tom_chao/pen/YzrEVZY
总结
Sass作为一款流行的CSS预处理器，提供了插值表达#{}和map类型等特性，在实现主题切换方面提供了不少便利。
如果有多条主题样式需要应用，每一条都要写一遍@include，感觉有点麻烦，能不能只写一遍@include？
.app {
@include themify('background-color', $bg-color);
@include themify('color', $text-color);
// ...
}
// 希望可以只写一遍@include
.app {
@include themify(
(
'background-color': $bg-color,
'color': $text-color
)
);
}
如果还需要使用!important去覆盖一些因为权重问题无法应用的样式（比如使用了外部UI库，外部UI库中使用了!important，需要覆盖该样式），怎么解决？
// 这里提供一个思路，可以添加一个参数$important
@mixin themify($key, $valueMap: null, $important: false) {
// xxx
}
评论