主题方案

UED 设计会根据基础色板，中性色板设计出一套标准全局变量，以上变量可以通过主题管理后台进行管理。主题管理后台会生成，less 标准全局变量，存入到 @uyun/everest/styles。 css 标准全局变量，存入到 @uyun/runtime，并提供接口获取 css 变量。

项目样式文件中必须使用 less 标准全局变量，样式文件中引用的 less 标准全局变量会在编译的过程中转换成引用 css 标准全局变量，@uyun/runtime 会在项目运行的时候将 css 标准全局变量插入到 DOM 结构中。

`less`标准全局变量使用方式

在项目可以直接使用主题管理后台中的标准全局变量，无需导入@uyun/everest-styles。因为变量会在编译的过程中转化成css变量，例： @page-bg => --var(page-bg), 所有不会产生 less 编译错误

使用步骤如下：

安装插件 @uyun/cli-webpack-less-themes

yarn add @uyun/cli-webpack-less-themes

@uyun/cli 脚手架配置文件 everest.config.js

plugins: [
  '@uyun/cli-webpack-less-themes'
]

在 .less 文件中使用

/** @import "~@uyun/everest-styles"; 注意无需导入 @uyun/everest-styles **/

body {
  background: @page-bg;
}

`less` 变量替换成标准全局变量实现方案

方案步骤如下：

替换项目中 less 标准全局变量

// 配置 less-loader 参数 options.modifyVars
{
  loader: 'less-loader',
  options: {
    /**
     * 获取 modifyVars 方式
     * 1. 标准主题管理后台中提供接口获取 modifyVars
     * 2. 插件 @uyun/cli-webpack-less-themes/lib/get-css-vars.js 中也提供了方法获取
     * **/
    modifyVars: {
      '@page-bg': 'var(--page-bg)'
    },
  },
}


// 源码
body {
  background: @page-bg;
}

// 编译后
body {
  background: var(--page-bg);
}

收集项目中使用 less 原生函数, 将其转换成 css 变量

/**
 * 1. 覆盖 less 原生函数
 * 2. less函数原生函数源码
 **/
function makeRegistry( base ) {
    return {
        _data: {},
        add: function(name, func) {
            // precautionary case conversion, as later querying of
            // the registry by function-caller uses lower case as well.
            name = name.toLowerCase();

            if (this._data.hasOwnProperty(name)) {
                //TODO warn
            }
            this._data[name] = func;
        },
        addMultiple: function(functions) {
            Object.keys(functions).forEach(
                function(name) {
                    this.add(name, functions[name]);
                }.bind(this));
        },
        get: function(name) {
            return this._data[name] || ( base && base.get( name ));
        },
        inherit : function() {
            return makeRegistry( this );
        }
    };
}

module.exports = makeRegistry( null );

/**
 * 例: fade(@page-bg, 30%) 函数覆盖
 * 1. 当参数 color 值为 css 变量
 * 2. fade 函数返回值参数, 都是 less ast-node 对象
 * 3. less 函数转换成 css 变量形式, 例 fade(@page-bg, 30%) => fade__page-bg__30
 * 4. fade__page-bg__30 记录到 node 全局变量 global.variables 中
 * 5. 根据 global.variables 的值生成 css 变量与变量计算出的值, 例 fade__page-bg__30 会根据参数重新调用 less的fade 函数算出来值赋值给css 变量
 * 6. 开发环境 webpack.devServerConfig 配置覆盖将 global.variables 数据返回到前端, 然后将获取到变量插入到 DOM 结构中
 * 7. 生产环境 将 global.variables 的值写入打包后前端代码中
 **/
functionRegistry.addMultiple({
  fade (color, amount) {
    if (color.name === 'var') {
      if (!global.variables) {
        global.variables = {}
      }
    
      if (!global.variables[method]) {
        global.variables[method] = {}
      }
    
      const value = color.args[0].value
      const util = amount.value
      const variable = `${method}__${value.replace('--', '')}__${util}`
    
      global.variables[method][variable] = [color, amount]
      return new Call('var', [new Keyword(`--${variable}`)])
    }
    const fade = functionRegistry.get('fade')
    return fade(color, amount)
  }
})

收集项目中使用 less 自定义函数, 将其转换成 css 变量

/**
 * 例: ~`colorPalette('@{purple-6}', 1) ` 函数覆盖
 * 1. 当参数 color 值为 css 变量, @{purple-6} 会被转换成 var(--purple-6)
 * 2. colorPalette 函数返回值是一个字符串
 * 3. less 函数转换成 css 变量形式, 例 ~`colorPalette('@{purple-6}', 1) ` => colorPalette__purple-6__1
 * 4. fade__page-bg__30 记录到 node 全局变量 global.variables 中
 * 5. 根据 global.variables 的值生成 css 变量与变量计算出的值, 例 colorPalette__purple-6__1 会根据参数重新调用 less 的 colorPalette 函数算出来值赋值给css 变量
 **/
 
.colorPaletteMixin() {
@functions: ~`(function() {
  this.colorPalette = function(color, index) {
    // color var(--purple-6)
    var method = 'colorPalette'
    var _color = color.replace('var(--', '').replace(')', '')
    var name = 'colorPalette__' + _color + '__' + index
    var variable = 'var(--'+name+')'

    if (!global.variables) {
      global.variables = {}
    }

    if (!global.variables[method]) {
      global.variables[method] = {}
    }

    global.variables[method][name] = [_color, index]
    return variable
  };
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();

Current Tags

4.0.1 ... latest (2 years ago)

111 Versions

4.0.1 ... 2 years ago
4.0.0 ... 2 years ago
3.1.2 ... 2 years ago
3.1.1 ... 2 years ago
3.1.0 ... 2 years ago
3.0.33 ... 3 years ago
3.0.31 ... 3 years ago
3.0.22 ... 4 years ago
3.0.21 ... 4 years ago
3.0.20 ... 4 years ago
3.0.19 ... 4 years ago
3.0.18 ... 4 years ago
3.0.16 ... 4 years ago
3.0.14 ... 4 years ago
3.0.12 ... 4 years ago
3.0.11 ... 4 years ago
3.0.10 ... 4 years ago
3.0.6 ... 4 years ago
3.0.4 ... 4 years ago
3.0.3 ... 4 years ago
3.0.2 ... 4 years ago
3.0.1 ... 4 years ago
3.0.0-beta.7 ... 4 years ago
3.0.0-beta.6 ... 4 years ago
3.0.0-beta.5 ... 4 years ago
3.0.0 ... 4 years ago
3.0.0-beta.4 ... 4 years ago
3.0.0-beta.3 ... 4 years ago
3.0.0-beta.2 ... 4 years ago
3.0.0-beta.1 ... 4 years ago
2.0.4 ... 4 years ago
2.0.3 ... 4 years ago
2.0.2 ... 4 years ago
2.0.0 ... 4 years ago
1.0.1 ... 4 years ago
1.0.0-beta.5 ... 4 years ago
1.0.0-beta.4 ... 4 years ago
1.0.0-beta.3 ... 4 years ago
1.0.0-beta.2 ... 4 years ago
0.1.1-beta.14 ... 4 years ago
0.1.1-beta.13 ... 4 years ago
0.1.1-beta.12 ... 4 years ago
0.1.1-beta.11 ... 4 years ago
0.1.1-beta.10 ... 4 years ago
0.1.1-beta.9 ... 4 years ago
0.1.1-beta.8 ... 4 years ago
0.1.1-beta.7 ... 4 years ago
0.1.1-beta.6 ... 4 years ago
0.1.1-beta.5 ... 4 years ago
0.1.1-beta.4 ... 4 years ago
0.1.1-beta.3 ... 4 years ago
0.1.1-beta.2 ... 4 years ago
0.1.1-beta.1 ... 4 years ago
0.1.1-beta.0 ... 4 years ago
0.0.2-beta.55 ... 4 years ago
0.0.2-beta.54 ... 4 years ago
0.0.2-beta.53 ... 4 years ago
0.0.2-beta.52 ... 4 years ago
0.0.2-beta.51 ... 4 years ago
0.0.2-beta.50 ... 4 years ago
0.0.2-beta.49 ... 4 years ago
0.0.2-beta.48 ... 4 years ago
0.0.2-beta.47 ... 4 years ago
0.0.2-beta.46 ... 4 years ago
0.0.2-beta.45 ... 4 years ago
0.0.2-beta.44 ... 4 years ago
0.0.2-beta.43 ... 4 years ago
0.0.2-beta.42 ... 4 years ago
0.0.2-beta.41 ... 4 years ago
0.0.2-beta.40 ... 4 years ago
0.0.2-beta.39 ... 4 years ago
0.0.2-beta.38 ... 4 years ago
0.0.2-beta.37 ... 4 years ago
0.0.2-beta.36 ... 4 years ago
0.0.2-beta.35 ... 4 years ago
0.0.2-beta.34 ... 4 years ago
0.0.2-beta.33 ... 4 years ago
0.0.2-beta.32 ... 4 years ago
0.0.2-beta.31 ... 4 years ago
0.0.2-beta.30 ... 4 years ago
0.0.2-beta.29 ... 4 years ago
0.0.2-beta.28 ... 4 years ago
0.0.2-beta.27 ... 4 years ago
0.0.2-beta.26 ... 4 years ago
0.0.2-beta.25 ... 4 years ago
0.0.2-beta.24 ... 4 years ago
0.0.2-beta.23 ... 4 years ago
0.0.2-beta.22 ... 4 years ago
0.0.2-beta.21 ... 4 years ago
0.0.2-beta.20 ... 4 years ago
0.0.2-beta.19 ... 4 years ago
0.0.2-beta.18 ... 4 years ago
0.0.2-beta.17 ... 4 years ago
0.0.2-beta.16 ... 4 years ago
0.0.2-beta.15 ... 4 years ago
0.0.2-beta.14 ... 4 years ago
0.0.2-beta.13 ... 4 years ago
0.0.2-beta.12 ... 4 years ago
0.0.2-beta.11 ... 4 years ago
0.0.2-beta.10 ... 4 years ago
0.0.2-beta.9 ... 4 years ago
0.0.2-beta.8 ... 4 years ago
0.0.2-beta.7 ... 4 years ago
0.0.2-beta.6 ... 4 years ago
0.0.2-beta.5 ... 4 years ago
0.0.2-beta.4 ... 4 years ago
0.0.2-beta.3 ... 4 years ago
0.0.2-beta.2 ... 4 years ago
0.0.2-beta.1 ... 4 years ago
0.0.2-beta.0 ... 4 years ago
0.0.1 ... 4 years ago

主题方案

less标准全局变量使用方式

less 变量替换成标准全局变量实现方案

Current Tags

111 Versions

`less`标准全局变量使用方式

`less` 变量替换成标准全局变量实现方案