最近想做一个切换主题的功能,但是发现scss和less使用起来还有些区别,写完之后自己总结了一些,大家可以看看。
1、scss切换
首先需要确保项目中已经安装了 sass 和 sass-loader
1、在src下面创建style文件夹用于存放css文件,创建theme.scss 和 handle.scss
theme.scss
$themes 下面配置的 light 和 dark 是主题颜色的名字,这个自己随意取,用的时候跟这个名字一致即可
light 和 dark 里面的配置名字也是 自定义 的,使用的时候保持一致即可
$white: #fff;
$black: #0e1225;
$themes: (
light: (
// 背景色
bg-color: $white,
// 文字颜色
font-color: #000,
// 渐变背景起始色
bg-color-start: #fefeff,
// 渐变背景结束色
bg-color-end: #e5f1fd,
// 代码块背景色
code-bg-color: #f5f7fa,
// 代码块文字颜色
code-font-color: #409eff,
),
dark: (
bg-color: #192342,
font-color: #c2c2c2,
bg-color-start: #0e1225,
bg-color-end: #0e1225,
code-bg-color: #2d2d2d,
code-font-color: #ccc,
),
);
handle.scss
这个文件主要是采用minxi混入的方式将属性混入进去
@mixin gradient_background、@mixin font_color 这个名字也是自定义的,使用时对应即可(建议语义化,方便维护)。
@import "./theme.scss";
// 从主题色map中取出对应颜色
@function themed($key) {
@return map-get($theme-map, $key);
}
// 切换主题时 获取不同的主题色值
@mixin themeify {
@each $theme-name, $theme-map in $themes {
// !global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
// 判断html的data-theme的属性值 #{}是sass的插值表达式
// & sass嵌套里的父容器标识 @content是混合器插槽,像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}
// 获取渐变背景色
@mixin gradient_background($start-color, $end-color) {
@include themeify {
background: linear-gradient(
to bottom,
themed($start-color),
themed($end-color)
) !important;
transition: background-position 0.6s;
}
}
// 获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color) !important;
}
}
// 获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color) !important;
}
}
// 获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color) !important;
}
}
这里配置好之后就可以在想要设置颜色的vue文件中引入使用了
示例
<template>
<div class="aaa">
<button @click="change">切换按钮</button>
</div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
const flag = ref(false)
onMounted(() => {
window.document.documentElement.setAttribute('data-theme', 'light') // 进入页面默认颜色
})
const change = () => { // 切换按钮
flag.value = !flag.value
if (flag.value) {
window.document.documentElement.setAttribute('data-theme', 'dark')
} else {
window.document.documentElement.setAttribute('data-theme', 'light')
}
}
</script>
<style lang="scss" scoped>
// 确保使用的是scss
@import '../style/theme/handle.scss'; // 先引入
.aaa {
width: 500px;
height: 500px;
// background_color对应handle.scss 文件中的属性,'bg-color' 对应theme.scss中的属性
@include background_color('font-color');
@include font_color('font-color');
}
</style>
这样就ok拉(v2和v3都可以用),如果有问题,评论区或者私信我哦。有帮助的话就帮作者点个赞哦
原文链接:https://juejin.cn/post/7317838211661266955 作者:凤栖夜落