Scss换肤
项目中虽然没有一键换肤的要求,但是产品要求后期能换主题。在开发组件中涉及到主题的地方,要提取一些公用的变量,不要直接写死样式值。但是如果只是定义一些变量的话,只是完成控制颜色等值的提取。后期切换的话需要把所有变量再写一遍并注释之前的。不是很优雅。
一、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换肤的更多相关文章
- vue中利用scss实现整体换肤和字体大小设置
一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...
- vue 中使用sass实现主体换肤
有如下代码要实现换肤功能 <template> <div class="app-root" :class="themeClass"> & ...
- element-ui 动态换肤
1.在安装好 element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装 element-theme npm i ele ...
- vue-基于elementui换肤
思路: 生成不同的css颜色文件,每个文件内部命名前加上.custom-颜色值做命名空间. 然后app.vue里引入全部的颜色文件. 用户点击某颜色,就在body加上class:custom-00a5 ...
- 基于webpack4+vue-cli3项目的换肤功能
起因 最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤. 项目开 ...
- vue+ element 动态换肤
转至 https://www.cnblogs.com/dengqichang/p/10364455.html 一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://elem ...
- 有点激动,WPF换肤搞定了!
一如既往没废话! wpf桌面应用开发都是window内引入很多个UserControl. 如果你有通过不同颜色来换肤的需求,那么下面我就将整个过程! 分2个步骤: 1.主窗体背景色替换: 2.同时界面 ...
- 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 ...
- 换肤系统(oocss方式)
近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行 ...
随机推荐
- Python使用openpyxl操作excel表格
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 ht ...
- 剑指offer-39:平衡二叉树
题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. 解题思路 在做这题是,我第一反应就是遍历两次二叉树.第一遍记录每个节点的深度,并将信息存入HashMap中,key = node,value ...
- 如何Windows下配置Prometheus的监控数据文件为3天
如上图,prometheus的data文件夹时间久了会变得很大,听说是保留15天的数据.但是实际上,我只需要保留3天的数据就够了,之前试过用批处理文件清理,但是强行删除会导致peometheus崩溃, ...
- 图像处理之C语言实现二维卷积
在用C语言实现图像处理中,经常要用到二维卷积的运算,这个在matlab中是非常容易实现的,只需要conv2()就OK啦,而且速度非常的快.但是在C语言中就需要四层的for循环来实现了. 首先二维卷积的 ...
- Jmeter 查看结果树之界面功能介绍 [8]
查看结果树显示所有请求响应的树,通过它可以查看任何请求的响应.除了显示响应之外,还可以查看获取响应所花费的时间以及一些响应代码.需要通过"查看结果树"来查看服务器处理请求之后的返回 ...
- 简单“三步”让你的网站支持https!
关于Let's Encrypt Let's Encrypt作为一个公共且免费SSL的项目逐渐被广大用户传播和使用,是由Mozilla.Cisco.Akamai.IdenTrust.EFF等组织人员发起 ...
- LeetCode H2O 生成
第1117题 现在有两种线程,氢 oxygen 和氧 hydrogen,你的目标是组织这两种线程来产生水分子. 存在一个屏障(barrier)使得每个线程必须等候直到一个完整水分子能够被产生出来. 氢 ...
- 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 ...
- C#扩展方法学习笔记
C#扩展方法,简单的理解是不修改原来类的源代码的情况下,为某个类添加某个方法.扩展方法被定义为静态方法,但它们是通过实例方法语法进行调用的.它们的第一个参数指定该方法作用于哪个类型,并且该参数以 th ...
- Pull Request 工作流——更高效的管理代码
目录 Pull Request 工作流--更高效的管理代码 1.问题 2.解决方案 3.Git分支流管理代码具体实施 3.1本地分支操作管理 3.1.1查看分支 3.1.2创建分支 3.1.3切换分支 ...