实际上,在SCSS中我们并不是直接对data-theme的值进行条件判断,而是通过编写一个通用的@mixin,然后在HTML中通过改变data-theme属性的值来动态应用不同的样式。以下是一个示例代码: scss // 定义主题变量 $themes: ( light: ( font-color: #000, bg-color: #fff ), dark: ( font-color: #fff, bg-color...
('data-theme', 'light') } } // 确保使用的是scss @import '../style/theme/handle.scss'; // 先引入 .aaa { width: 500px; height: 500px; // background_color对应handle.scss 文件中的属性,'bg-color' 对应theme.scss中的属性 @include background_color('bg-color'); @include font_color...
@import './theme.scss'; //引入主题配置文件 //遍历主题map @mixin themeify1 { @each $theme-name, $theme-map in $themes { //!global 把局部变量强升为全局变量 $theme-map: $theme-map !global; //判断html的data-theme的属性值 #{}是sass的插值表达式 //& sass嵌套里的父容器标识 @content是...
利用@mixin 来对themes配置进行处理,使其输出对应的内容,theme.scss同目录下新增halder_themes.scss @import'./theme.scss';//引入主题配置文件//遍历主题map@mixinthemeify1 {@each$theme-name,$theme-mapin$themes{//!global 把局部变量强升为全局变量$theme-map:$theme-map!global;//判断html的data-theme的...
[data-theme="#{$theme-name}"] & { //插槽占位 @content; } } } //获取主题属性值 @function theme-value($key) { @return map-get($theme-map, $key); } //从这里开始,就是我们需要在项目代码里面具体要使用的部分了 //设置背景颜色 ...
@each $theme-name,$theme-map in $themes { // !global 把局部变量强升为全局变量 $theme-map: $theme-map !global; // 判断html的data-theme的属性值 #{}是sass的插值表达式 // & sass嵌套里的父容器标识 @content是混合器插槽,像vue的slot ...
1@import'./themes.scss';2@mixin themeify {3@each $theme-name, $theme-mapin$themes {//$theme-name 主题样式类名, $theme-map样式4$theme-map: $theme-map !global;//!global 把局部变量强升为全局变量5body[data-theme=#{$theme-name}] & {//判断html的data-theme的属性值 #{}是sass的插值...
在App.vue 文件下的 mounted 中将 body 添加一个自定义的 data-theme 属性,并将其设置为 default 代码语言:javascript 代码运行次数:0 运行 AI代码解释 // App.vue mounted() { document .getElementsByTagName("body")[0].setAttribute("data-theme","default");}, ...
themeify.scss 1 @import './themes.scss';2 @mixin themeify { 3 @each $theme-name, $theme-map in $themes {//$theme-name 主题样式类名， $theme-map样式 4 $theme-map: $theme-map !global; //!global 把局部变量强升为全局变量 5 body[data-theme=#{$theme-name}] & { //判...
.table-data { background-color: #F00; background-image: linear-gradient(to right, #F00, orange, yellow); } 总结 mixin是可以重复使用的一组css声明,有助于减少重复代码,只需声明一次,就可在文件中引用; 混合指令可以包含所有的 css规则,绝大部分scss规则,可以传递参数,输出多样化的样式; 使用...