css less 不要作用到子对象_使用Less实现网站主题切换

v-easy-components change theme

很多初学前端的开发同学一定有一种想法，就是如何更改网站的主题。前年（2018），我也陷入了思考，如何切换网站主题呢？当时不知道less，只想到一种办法，就是利用javascript的能力去修改每个节点的样式。这样做有很大的弊端，比如：

节点元素的更换、类名或者特殊标记冲突导致功能不能如期工作，还需要跟随修改js代码。
js代码难以维护。

随着慢慢的接触预编译css，如今又有一种想法，就是利用预编译的特性和less提供的功能实现切换主题，具体流程如下：

编写好less文件
使用less.modifyVars改变变量
less会重新计算依赖此变量的样式规则（less负责）
输出到style中（less负责）

注意：如果使用webpack打包工具，并且使用了less-loader时是无法去改变变量，因为在less-loader中已经预编译好less文件到css，less-loader没有提供less变量出来，所以并不能修改，也就达不到预期的效果。

在线预览地址 https://codepen.io/linkontoask/pen/VwYdjPM

css less 不要作用到子对象_使用Less实现网站主题切换相关推荐

css less 不要作用到子对象_不要盲目的在项目中使用LESS CSS
此篇文章发布于2011年,当时的想法与现在已有不同,不建议继续阅读. 如果你还不知道LESS CSS是什么东西,可以看一下这篇文章,是我一朋友写给新人看的<CSS--LESS> 不可否认, ...
css less 不要作用到子对象_CSS-预处理语言Sass、Less简述
CSS作为前端开发的三驾马车之一,无时无刻不在影响着前端的发展.为了让 CSS 变得更加的好用,出现了一些预处理语言. 它们让 CSS 彻底变成一门可以使用变量 .循环 .继承 .自定义方法等多种特性 ...
css less 不要作用到子对象_CSS的亲儿子，居然不是Less？？
先来聊聊sass吧,之前用了很久的less,刚开始接触的时候感觉这东西就是个神器. 写CSS时间长了自然就能发现CSS在书写的时候的不足之处: 不能嵌套,没有变量,更加不能像js那样用循环自动生成之类 ...
[css] 说说你对字母“X“在CSS中有什么作用？
[css] 说说你对字母"X"在CSS中有什么作用? 可以用作关闭按钮叉叉X的底部与文本对齐的基线位置相同个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...
html中hover的作用,hover在css中的作用是什么
hover在css中的作用是什么发布时间:2020-12-07 10:26:29 来源:亿速云阅读:143 作者:小新这篇文章给大家分享的是有关hover在css中的作用是什么的内容.小编觉得挺 ...
HTML5期末大作业：动漫网站设计——火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计...
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计- 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
静态HTML网页设计作品——火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计
HTML5期末大作业:动漫网站设计--火影忍者动漫(7页) HTML+CSS+JavaScript 漫画网页制作作业_电影网页设计- 文章目录 HTML5期末大作业:动漫网站设计--火影忍者动漫(7页 ...
overflow是什么意思，css overflow什么作用？
overflow是什么意思,css overflow什么作用? css overflow设置当对象的内容超过其指定高度及宽度时如何管理内容的属性,是添加滚动条.还是隐藏剪切超出内容. CSS over ...
HTML5期末大作业：鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:鲜花超市网站设计--鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作作品介绍 1.网页作品简介 ...

css less 不要作用到子对象_使用Less实现网站主题切换

css less 不要作用到子对象_使用Less实现网站主题切换相关推荐

最新文章

热门文章