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

一、Scss部分

  • 定义变量以及映射表
// 默认主题
$default-theme : (
base-color: #ddd,
border-color: #
);
//红色主题
$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: .5em .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。

Scss换肤的更多相关文章

  1. vue中利用scss实现整体换肤和字体大小设置

    一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...

  2. vue 中使用sass实现主体换肤

    有如下代码要实现换肤功能 <template> <div class="app-root" :class="themeClass"> & ...

  3. element-ui 动态换肤

    1.在安装好 element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装 element-theme npm i ele ...

  4. vue-基于elementui换肤

    思路: 生成不同的css颜色文件,每个文件内部命名前加上.custom-颜色值做命名空间. 然后app.vue里引入全部的颜色文件. 用户点击某颜色,就在body加上class:custom-00a5 ...

  5. 基于webpack4+vue-cli3项目的换肤功能

    起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...

  6. vue+ element 动态换肤

    转至 https://www.cnblogs.com/dengqichang/p/10364455.html 一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://elem ...

  7. 有点激动,WPF换肤搞定了!

    一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面 ...

  8. Android换肤技术总结

    原文出处: http://blog.zhaiyifan.cn/2015/09/10/Android%E6%8D%A2%E8%82%A4%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB ...

  9. 换肤系统(oocss方式)

    近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行 ...

随机推荐

  1. 记MAC地址、磁盘序列号的获取

    import java.io.*; import java.net.Inet4Address; import java.net.InetAddress; import java.net.Network ...

  2. Java 打印Word文档

    本文介绍如何在Java程序中通过物理打印机和虚拟打印机来打印Word文档的方法.文中使用了类库Spire.Doc for Java,可通过官网下载jar文件并导入程序或者直接通过maven仓库安装导入 ...

  3. python多线程编程—同步原语入门(锁Lock、信号量(Bounded)Semaphore)

    摘录python核心编程 一般的,多线程代码中,总有一些特定的函数或者代码块不希望(或不应该)被多个线程同时执行(比如两个线程运行的顺序发生变化,就可能造成代码的执行轨迹或者行为不相同,或者产生不一致 ...

  4. Client error attempting to change layout margins of a private view

    从 iOS 11 开始,UINavigationBar 使用了自动布局,左右两边的按钮到屏幕之间会有 16 或 20 的边距. 为了避免点击到间距的空白处没有响应,通常做法是:定义一个 UINavig ...

  5. ConcurrentHashMap(1.8)分析

    在ConcurrentHashMap(1.8)中与HashMap非常相似,只不过它是线程安全的,在这里主要分析一下putVal()方法,看看与HashMap的区别. final V putVal(K ...

  6. Centos系统镜像安装

    一.下载Centos版本 官网地址:http://isoredirect.centos.org/centos 二.制作U盘启动镜像 1.下载安装win32diskimager,用于制作U盘启动镜像,点 ...

  7. Spring注解之@Component详细解析

    @controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到sprin ...

  8. SpringMVC的工作流程?Mybatis和hibernate区别?

    SpringMVC的工作流程?1. 用户发送请求至前端控制器DispatcherServlet2. DispatcherServlet收到请求调用HandlerMapping处理器映射器.3. 处理器 ...

  9. 教你用python假装黑客装逼,当着朋友的面破解他的网站密码!

    如何破解iphone登陆密码 今天看了一篇关于如何破解iphone手机密码的文章,瞬间觉得科学技术不是第一生产力,why? 根据“可靠消息”称,即便美国FBI也无法轻易的对iphone手机进行暴力破解 ...

  10. js-06-字符串

    一.查找字符串的字符串 a:indexOf:没有查询到返回值为-1: b:lastIndexoOf:查找到的为重复的最后一个: c:search 查找: var str="good good ...