less-plugin-themes

less.js 的主题插件

这是一个用于快速开发 CSS 主题功能的 less.js 插件。

简介

本插件通过在 Less 编译过程的 postprocess 阶段中，补充主题样式有关的 CSS 选择器，自动为开发者的项目增加主题样式，提高主题开发效率。

例如，只需要简单地声明颜色 list 规则：

@color: #333, #fff;

.class {
  color: @color;
  background-color: #fff;
}

将会编译成：

.class {
  color: #333;
  background-color: #fff;
}

.white .class {
  color: #333;
}

.blue .class {
  color: #fff;
}

插件只会把声明了颜色 list 规则的属性作为主题中的属性，同时保留原有样式作为默认主题。

v0.2.0 新增功能

从 0.2.0 版本开始，新增了针对 @uyun/components 的主题换肤功能，详情查看功能简介。

安装

$ unpm install --save-dev @uyun/less-plugin-themes

使用

插件配置

Webpack

// webpack.config.js
const LessPluginThemes = require('@uyun/less-plugin-themes')

module.exports = {
  ...
    {
      loader: 'less-loader',
      options: {
        plugins: [
          new LessPluginThemes(),

          // 自定义主题，默认为 ['white', 'blue']
          new LessPluginThemes({
            themes: ['white', 'blue']
          })
        ]
      }
    }
  ...
}

everest-cli

{
  ...
  // 与 everest-cli 同步开启 CSS Modules 模式
  "cssModules": false,
  "themes": ["white", "blue"]
  ...
}

Less

颜色

通常来讲，在主题的样式中，应该只包含与主题颜色有关的内容。因此，建议开发者只在 list 规则中编写颜色相关的变量或值。

当 list 规则中的值都为有效的 CSS Color Value 时，可使用如下最简单和纯粹的直观用法。

有效的 CSS Color Value 有：

编写 Less：

// 可选，通过 everest-styles 获取 UED 规范中的颜色变量
@import "~@uyun/everest-styles/index";

// 通过 less 中的 list 规则声明颜色数组，
// 默认主题为 ['white', 'blue']，
// 因此以下三个 list 规则中，依次为各属性在三种主题的对应颜色。
@title-color: @gray-body, @white;
@title-border: @gray-outline, @deep-outline;
@title-header-bg: rgba(255, 255, 255, 0.85), blue;

.title {
  color: @title-color;
  border: 1px solid @title-border;

  &-header {
    background-color: @title-header-bg;
  }
}

编译后的 CSS：

/* 默认主题，与 white 主题相同 */
.title {
  color: #464C55; /* @gray-body */
  border: 1px solid #D3D9E2; /* @gray-outline */
}

.title-header {
  background-color: rgba(255, 255, 255, 0.85);
}

/* white 主题 */
.white .title {
  color: #464C55; /* @gray-body */
  border: 1px solid #D3D9E2; /* @gray-outline */
}

.white .title-header {
  background-color: rgba(255, 255, 255, 0.85);
}

/* blue 主题 */
.blue .title {
  color: #FFFFFF; /* @white */
  border: 1px solid #2A5F9C; /* @deep-outline */
}

.blue .title-header {
  background-color: blue;
}

兼容

当 list 规则中出现除了有效的 CSS Color Value 的其它值时，上述做法可能不会工作，因为 list 规则中用逗号分隔的语法与 CSS 中的 Multiple Attribute Values 产生了歧义。为了解决这种需求，插件提供了一个辅助函数 _。

编写 Less：

// 例如 
@title-border: 1px solid #999, none;

.title {
  border: _(@title-border);
}

编译后的 CSS：

.title {
  border: 1px solid #999;
}

.white .title {
  border: 1px solid #999;
}

.blue .title {
  border: none;
}

选项

themes

需要使用的主题，其中第一个为默认主题，默认 ['white', 'blue']。

new LessPluginThemes({
  // 项目的主题为 light 或 dark，其中 light 为默认主题
  themes: ['light', 'dark']
})

编写 Less：

@title-color: #464c55, #fff;

.title {
  color: @title-color;
}

编译后的 CSS：

.title {
  color: #464c55;
}

.light .title {
  color: #464c55;
}

.dark .title {
  color: #fff;
}

modules

是否启用 CSS Modules 模式，默认 false。

new LessPluginThemes({
  modules: true
})

编写 Less：

@title-color: #464c55, #fff;

.title {
  color: @title-color;
}

编译后的 CSS：

.title {
  color: #464c55;
}

:global(.white) .title {
  color: #464c55;
}

:global(.blue) .title {
  color: #fff;
}

Current Tags

• 0.2.5                                ...           latest (4 years ago)

24 Versions

• 0.2.5                                ...           4 years ago
• 0.2.4-beta.1                                ...           4 years ago
• 0.1.0-beta.0                                ...           7 years ago
• 0.1.0-beta.1                                ...           7 years ago
• 0.1.0-beta.2                                ...           7 years ago
• 0.1.0-beta.3                                ...           7 years ago
• 0.1.0                                ...           7 years ago
• 0.1.1                                ...           7 years ago
• 0.1.2                                ...           7 years ago
• 0.1.3                                ...           7 years ago
• 0.1.4                                ...           7 years ago
• 0.1.5                                ...           7 years ago
• 0.2.0-beta.1                                ...           7 years ago
• 0.2.0-beta.2                                ...           7 years ago
• 0.2.0-beta.3                                ...           7 years ago
• 0.2.0-beta.4                                ...           7 years ago
• 0.2.0-beta.5                                ...           7 years ago
• 0.2.0-beta.6                                ...           7 years ago
• 0.2.0                                ...           7 years ago
• 0.2.1                                ...           7 years ago
• 0.2.2                                ...           7 years ago
• 0.2.3                                ...           6 years ago
• 0.2.4                                ...           6 years ago
• 0.1.6                                ...           7 years ago