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进行 ...
随机推荐
- 记MAC地址、磁盘序列号的获取
import java.io.*; import java.net.Inet4Address; import java.net.InetAddress; import java.net.Network ...
- Java 打印Word文档
本文介绍如何在Java程序中通过物理打印机和虚拟打印机来打印Word文档的方法.文中使用了类库Spire.Doc for Java,可通过官网下载jar文件并导入程序或者直接通过maven仓库安装导入 ...
- python多线程编程—同步原语入门(锁Lock、信号量(Bounded)Semaphore)
摘录python核心编程 一般的,多线程代码中,总有一些特定的函数或者代码块不希望(或不应该)被多个线程同时执行(比如两个线程运行的顺序发生变化,就可能造成代码的执行轨迹或者行为不相同,或者产生不一致 ...
- Client error attempting to change layout margins of a private view
从 iOS 11 开始,UINavigationBar 使用了自动布局,左右两边的按钮到屏幕之间会有 16 或 20 的边距. 为了避免点击到间距的空白处没有响应,通常做法是:定义一个 UINavig ...
- ConcurrentHashMap(1.8)分析
在ConcurrentHashMap(1.8)中与HashMap非常相似,只不过它是线程安全的,在这里主要分析一下putVal()方法,看看与HashMap的区别. final V putVal(K ...
- Centos系统镜像安装
一.下载Centos版本 官网地址:http://isoredirect.centos.org/centos 二.制作U盘启动镜像 1.下载安装win32diskimager,用于制作U盘启动镜像,点 ...
- Spring注解之@Component详细解析
@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到sprin ...
- SpringMVC的工作流程?Mybatis和hibernate区别?
SpringMVC的工作流程?1. 用户发送请求至前端控制器DispatcherServlet2. DispatcherServlet收到请求调用HandlerMapping处理器映射器.3. 处理器 ...
- 教你用python假装黑客装逼,当着朋友的面破解他的网站密码!
如何破解iphone登陆密码 今天看了一篇关于如何破解iphone手机密码的文章,瞬间觉得科学技术不是第一生产力,why? 根据“可靠消息”称,即便美国FBI也无法轻易的对iphone手机进行暴力破解 ...
- js-06-字符串
一.查找字符串的字符串 a:indexOf:没有查询到返回值为-1: b:lastIndexoOf:查找到的为重复的最后一个: c:search 查找: var str="good good ...