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

栏目: CSS · 发布时间: 5年前

内容简介:最近接到一个需求,是做白天和夜间模式的切换,里面涉及到背景色,主要文字色,副标题,备注的相关颜色的切换。由于是在老代码中进行改造,而且目前正常情况下,做这个实现,基本有以下方法

前言

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

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

思路

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

  • 拷贝一份原有样式,把最上层的样式名加个 -dark, 重写内部子层级的样式,然后在按外部模式引用。
  • Less 函数,定义一个less函数,传递不同的颜色值进去
  • Less 函数,传递 模式名称 进去,在函数内部定义出需要变更的颜色属性,动态加入 模式名称

第一种:哈哈,很多人下意识是这种方法。但是,两套模板,你要改下样式的话,两套都要改,不符合我们的易维护的理念,舍弃。

第二张:不错的想法,目前网上搜到过几种这样的方式。但是存在一个问题,要传很多参数,以后变化起来又要加参数,使用起来不是很方便。

第三种

:SIX SIX SIX,只传入主题名。调用起来很方便。

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

实现

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

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

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

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

// 白天色
@bgColor: #F7F8FA;
@textColor: #333333;
@subTextColor: #666666;
@tipsColor: #CCCCCC;
@errorColor: #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(''); // 执行less 函数
}

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

写在最后

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

写给大家看的设计书(第3版)

写给大家看的设计书(第3版)

[美] Robin Williams / 苏金国、刘亮 / 人民邮电出版社 / 2009-1 / 49.00元

这本书出自一位世界级设计师之手。复杂的设计原理在书中凝炼为亲密性、对齐、重复和对比4 个基本原则。作者以其简洁明快的风格,将优秀设计所必须遵循的这4 个基本原则及其背后的原理通俗易懂地展现在读者面前。本书包含大量的示例,让你了解怎样才能按照自己的方式设计出美观且内容丰富的产品。 此书适用于各行各业需要从事设计工作的读者,也适用于有经验的设计人员。一起来看看 《写给大家看的设计书(第3版)》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换