Less 函数巧妙解决白天和夜间模式

前言

最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。

由于是在老代码中进行改造,而且目前css是用less写的。

思路

正常情况下,做这个实现,基本有以下方法

  • 拷贝一份原有样式,把最上层的样式名加个 -dark, 重写内部子层级的样式,然后在按外部模式引用。
  • Less 函数,定义一个less函数,传递不同的颜色值进去
  • Less 函数,传递模式名称进去,在函数内部定义出需要变更的颜色属性,动态加入模式名称
第一种:哈哈,很多人下意识是这种方法。但是,两套模板,你要改下样式的话,两套都要改,不符合我们的易维护的理念,舍弃。
第二张:不错的想法,目前网上搜到过几种这样的方式。但是存在一个问题,要传很多参数,以后变化起来又要加参数,使用起来不是很方便。
第三种:SIX SIX SIX,只传入主题名。调用起来很方便。

核心理念,用函数式想法解决CSS重复问题。

实现

这里的实现,我就只写第三种了。

第一步:定义出不同主题色

第二步:定义模式切换方法,利用 Less 变量插值拼接出主题色变量,然后在样式里@@取值

第三步:根据模式字段判断,引用不同的主题了 ,如下 白天引用 .test 夜间用 .test-dark


// 白天色
@bgColor-daily: #F7F8FA;
@textColor-daily: #333333;
@subTextColor-daily: #666666;
@tipsColor-daily: #CCCCCC;
@errorColor-daily: #EE6560;

// 夜间色
@bgColor-dark: #171B30;
@textColor-dark: #FFFFFF;
@subTextColor-dark: rgba(255, 255, 255, 0.6);
@tipsColor-dark: rgba(255, 255, 255, 0.4);


// 模式切换
.styleChange(@theme) {
  // 定义页面显示各种颜色,拼接 theme 主题
  @bgColor: "bgColor-@{theme}";
  @textColor: "textColor-@{theme}";
  @subTextColor: "subTextColor-@{theme}";
  @tipsColor: "tipsColor-@{theme}";

  width: 100%;
  background: @@bgColor; // 使用 @@style 双@的方法取值
}

// 白天模式
.test {
  .styleChange(daily); // 执行less 函数
}

// 夜间模式
.test-dark {
  .styleChange(dark); // 执行less函数,传入 dark ,表示夜间
}

写在最后

好久没有更新了,谢谢关注的朋友,我胡汉三又回来了。


JS那些事儿
一个刚入行的前端的进击小专栏
5.5k 声望
878 粉丝
0 条评论
推荐阅读
less常用技巧
所以在给公司定制组件库的时候我们可以使用这两种方法来给使用者定制主题,当然了,我们设计的时候最好和主流框架的变量名保持一致,使得使用者更好上手。

小皇帝James阅读 3.3k

Less用法小记
方法一:通过双斜杠//的方式来进行注释,使用此方法来进行注释在编译成css后,注释在css文件中不会进行展示。方法二:通过斜杠加型号/** */的方式来进行注释,注释会留在编译生成的css文件中。

Qing2阅读 463

less预处理插件开发
less支持的插件分为两种模式,一种是普通插件,主要是扩展less的运行时语法(less默认函数)插件,通过@plugin语法使用。这种方式的主要使用请参考官网文档,本文不做探讨。

joyerli1阅读 429

less,more,vi命令光标移动快捷键速记
less,more,vi 命令是 Linux 下查看文档和日志比较常用的命令。在使用不是那么频繁时,可能会忘记如何快速移动光标。为了增强记忆,这次就来一起过一下。首先 less 命令,官方帮助我们用 less --help 可以查询,...

IT大飞阅读 299

Y 分钟速成 less
Less 是一种 CSS 预处理器,它增加了诸如变量、嵌套、mixin 等功能。Less (以及其它预处理器,如 Sass)能帮助开发人员编写易维护,DRY (Don't Repeat Yourself) 的代码。

小X学技术阅读 271

vue less/sass 样式穿透
用过vue的人估计都用过scoped样式属性,但有时候需要穿透样式,很多资料都说用>>> 或者 /deep/; 好,这没有什么问题,之前用less的时候,一直用/deep/的,一直都没有bug,但最近的项目用的是scss/sass, ...

ClingClang阅读 240

这是你理解的CSS选择器权重吗?
极度投入,深度沉浸,边界清晰前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待讨论点可随意评论,与各位同学一起学习~欢迎关注 『前端进阶圈』 公众号 ,一起探索学习前端技术......公众号回复 加群 ...

控心crazy阅读 133

封面图
5.5k 声望
878 粉丝
宣传栏