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 ，表示夜間
}

寫在最後

很久沒有更新了，謝謝關注的朋友，我胡漢三又回來了。