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