scss多主题适配方案

最新推荐文章于 2024-07-31 02:27:32 发布

巍MG

最新推荐文章于 2024-07-31 02:27:32 发布

阅读量278

点赞数

文章标签： scss css html

本文链接：https://blog.csdn.net/gmw1226/article/details/120344925

版权

定义多主题变量

// theme.scss
$themes: (
  default: (
    font-color-black3: #333333,
    font-color-black0: #000000,
    font-color-gray6: #666666,
    font-color-gray9: #999999,
    font-color-blue: #437acf,
    font-color-red: #e91500,
    bg-color-white: #ffffff,
    bg-color-white-f4: #f4f4f4,
    bg-color-blue: #437acf,
    bg-color-black: rgba(0, 0, 0, 0.4),
    bg-color-black0: #000000,
    border-color-gray: #dddddd,
    border-color-gray2: #cccccc,
  ),
  dark: (
    font-color-black3: #333333,
    font-color-black0: #000000,
    font-color-gray6: #666666,
    font-color-gray9: #999999,
    font-color-blue: #437acf,
    font-color-red: #e91500,
    bg-color-white: #ffffff,
    bg-color-white-f4: #f4f4f4,
    bg-color-blue: #437acf,
    bg-color-black: rgba(0, 0, 0, 0.4),
    bg-color-black0: #000000,
    border-color-gray: #dddddd,
    border-color-gray2: #cccccc,
  ),
);

定义多主题方法

// main.scss
@import './theme.scss';

//遍历主题map
@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是自己定义并全局挂载的属性 可以在APP.vue或者main.js里初始化赋值
    [data-theme='#{$theme-name}'] & {
      @content;
    }
  }
}
//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}
//获取颜色公共方法
@mixin theme_color($name,$color) {
  @include themeify {
    #{$name}: themed($color) !important;
  }
}

应用

// demo.scss
@import '@/assets/style/main.scss';
.demo-page{
	width:200px;
	height:100px;
	@include theme_color('background-color','bg-color-white');
	@include theme_color('border-color','border-color-gray');
	@include theme_color('font-color','font-color-red');
}