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

一、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. Python使用openpyxl操作excel表格

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 ht ...

  2. 剑指offer-39:平衡二叉树

    题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 解题思路 在做这题是,我第一反应就是遍历两次二叉树.第一遍记录每个节点的深度,并将信息存入HashMap中,key = node,value ...

  3. 如何Windows下配置Prometheus的监控数据文件为3天

    如上图,prometheus的data文件夹时间久了会变得很大,听说是保留15天的数据.但是实际上,我只需要保留3天的数据就够了,之前试过用批处理文件清理,但是强行删除会导致peometheus崩溃, ...

  4. 图像处理之C语言实现二维卷积

    在用C语言实现图像处理中,经常要用到二维卷积的运算,这个在matlab中是非常容易实现的,只需要conv2()就OK啦,而且速度非常的快.但是在C语言中就需要四层的for循环来实现了. 首先二维卷积的 ...

  5. Jmeter 查看结果树之界面功能介绍 [8]

    查看结果树显示所有请求响应的树,通过它可以查看任何请求的响应.除了显示响应之外,还可以查看获取响应所花费的时间以及一些响应代码.需要通过"查看结果树"来查看服务器处理请求之后的返回 ...

  6. 简单“三步”让你的网站支持https!

    关于Let's Encrypt Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用,是由Mozilla.Cisco.Akamai.IdenTrust.EFF等组织人员发起 ...

  7. LeetCode H2O 生成

    第1117题 现在有两种线程,氢 oxygen 和氧 hydrogen,你的目标是组织这两种线程来产生水分子. 存在一个屏障(barrier)使得每个线程必须等候直到一个完整水分子能够被产生出来. 氢 ...

  8. What happened when new an object in JVM ?

    原文链接:https://www.javaspring.net/java/what-happened-when-new-an-object-in-jvm I. Introduction As you ...

  9. C#扩展方法学习笔记

    C#扩展方法,简单的理解是不修改原来类的源代码的情况下,为某个类添加某个方法.扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的.它们的第一个参数指定该方法作用于哪个类型,并且该参数以 th ...

  10. Pull Request 工作流——更高效的管理代码

    目录 Pull Request 工作流--更高效的管理代码 1.问题 2.解决方案 3.Git分支流管理代码具体实施 3.1本地分支操作管理 3.1.1查看分支 3.1.2创建分支 3.1.3切换分支 ...