arvinxx / less-plugin-dynamic-variable

（⚠️WIP）a less plugin to enable dynamic variable by comile less variable to css variable, compatible with less function

(⚠️WIP) still unavailable

less-plugin-dynamic-variable

Make less variable dynamic by css variable, compatible with less function

npm i -D less-plugin-dynamic-variable

or

yarn add -D less-plugin-dynamic-variable

lessc usage

and then on the command line,

lessc file.less --dynamic-variable

Programmatic usage

const LessPluginCssDynamicVariable = require('less-plugin-dynamic-variable');

less
  .render(lessString, { plugins: [LessPluginCssDynamicVariable] })
  .then(({ css }) => {
    console.log(css);
  });

Example

configuration variable to be dynamic

// dynamtic-variable.config.js
module.exports = {
  variable: ['base-number', 'multiply-number'],
};

input:

// multiplyTwo is a function to multiply number by 2, just for example
@base-number: 10;
@multiply-number: multiplyTwo(@base-number);

[scope='local'] {
  @base-number: 2;
}

.use {
  base: @base-number;
  multiply: @multiply-number;
}

outputs:

:root {
  --base-number: 10;
  --multiply-number: 20;
}

:root[scope='local'] {
  --base-number: 2;
  --multiply-number: 4;
}

.use {
  color: var(--base-number);
  multiply: var(--multiply-number);
}