arvinxx / less-plugin-dynamic-variable Goto Github PK

动机

简单来说，就是让 less 变量可以无痛迁移到 css variable 去。详见二楼 ⬇️

功能特性

• 支持配置目标 less 变量
• 支持自动生成全局作用域 css 变量
• 支持自动生成局部作用域的 css 变量
• 支持使用了 less function 的 less 变量

RoadMap

• 确定需要转换为 css 变量的 less 变量
  • 集成 cosmiconfig
  • 设计配置清单
• 在生成完毕数值后，基于相应数值添加 css 变量声明；
• 在完成变量声明后，将原有 less 变量替换为 css 变量。

预期使用方法

1. 配置

使用 cosmiconfig 式配置。

暂且将配置命名为 dynamic-theme， 那么配置文件就是dynamic-theme.config.js、.dynamic-themerc等形式。

准备暂且只支持一个 variables 参数，其他需求后面再看

module.exports = {
  variables: ["primary-color","green-4"]
}

如此一来，插件就会识别到 primary-color 和 green-4 变量是需要提升为 css variables 的。

2. 引入插件

lessc 直接执行的话

lessc file.less --css-variable-theme

引入到配置项中

const LessPluginCssVariablesTheme = require('less-plugin-css-variable-theme');

{
  //...
  lessLoaderOptions: {
    plugins: [CssVariablesWithFunctions];
  }
}

3. 使用

如下声明

@primary-color: #1890ff;
.use {
  color: @primary-color;
}

会生成

:root {
  --primary-color: #1890ff;
}
.use {
  color: var(--primary-color);
}

参考对象

社区插件仓库

• https://github.com/miyamarisubs/less-plugin-custom-properties
• https://github.com/less/less-plugin-clean-css

开发笔记

• Less - 我来

资料库

• CSS - 语雀