Scss换肤

Posted 2022-07-01 gxp69

项目中虽然没有一键换肤的要求，但是产品要求后期能换主题。在开发组件中涉及到主题的地方，要提取一些公用的变量，不要直接写死样式值。但是如果只是定义一些变量的话，只是完成控制颜色等值的提取。后期切换的话需要把所有变量再写一遍并注释之前的。不是很优雅。

一、Scss部分

• 定义变量以及映射表

// 默认主题
$default-theme : (
  base-color: #ddd,
  border-color: #000
);
//红色主题
$red-theme : (
  base-color: red,
  border-color: red
);
//定义映射集合
$themes: (
  default-theme: $default-theme,
  red-theme: $red-theme
);

• 定义方法,循环遍历映射集合，生成对应样式表

@mixin base-background()
    @each $themename , $theme in $themes 
        [data-theme = ‘#$themename‘] & 
            background: map-get($map: $theme, $key: base-color )
        
    

• 在组件中,引入公共文件，在要用到的地方使用定义好的mixin

@import ‘theme.scss‘
.block 
    width: 1000px;
    @include base-background();

• 编译完成会生成如下代码。可见对应主题下面的块，会表现出对应的主题颜色。

  
  
   

  

  生成样式

二、VUE部分

• scss部分已经生成了符合需求的样式，剩下的就是要把自定义属性data-theme挂在app上，然后定义切换主题逻辑。

扩展：

定义Mixins

通过@mixin加名称的方式就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。

@mixin button   
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  

你可以通过@include来调用具有相同名称的mixin模块。

.button-green   
    @include button;  
    background-color: green;  

Map对象

　　如果说scss的list对应于javascript数组，那么scss的map就对应这个JavaScript对象直接量。

　　它是一种映射任何类型键值对（可以是任何类型，包括内嵌maps，不过不推荐这种内嵌方式）的数据结构。

　　代码实例:

$map: ( 
  $key1: value1, 
  $key2: value2, 
  $key3: value3 
)

　　上面是scss中map的一个简单代码实例，再来看一下JavaScript对象直接量的结构:

let object= 
  webName:"babyli",
  age:19,
  address:"湖北省武汉市"

　　scss中的map语法结构

　　（1）.map名称前要有一个$。

　　（2）.名称后面是一个冒号。

　　（3）.冒号后面是小括号。

　　（4）.小括号中的数据是以key:value键值对的形式存在的。

　　（5）.键值对之间使用逗号分隔，最后一个后面无需逗号。

 

scss内置了七个用来专门操作map的函数:

　　（1）.map-get($map,$key)：根据给定key，返回map中对应的value。

　　（2）.map-merge($map1,$map2)：将两个map合并成一个新的map。

　　（3）.map-remove($map,$key)：从map中删除一个key，返回一个新map。

　　（4）.map-keys($map)：返回map中所有的key。

　　（5）.map-values($map)：返回map中所有的value。

　　（6）.map-has-key($map,$key)：根据给定key判断map是否有对应value，有返回true，否则false。

　　（7）.keywords($args)：返回一个函数的参数，这个参数可以动态的设置key和value。