A plugin for Less to allow runtime manipulation of variables.
This plugin will replace Less variables with native CSS variables, and annotate the resulting CSS file so that the values can be edited at runtime using the CSS George editor. This is intended as a tool for designers working with theming systems to experiment with colour palettes at a variable level, which is often more broad than individual style rules as edited in the browser developer tools.
This plugin should not be used in production CSS since browser support for CSS variables is not yet widespread, and it currently provides no fallback. Please read the Known Limitations below.
Installation is easy via npm:
npm install --save-dev less-plugin-css-george
Marking variables for export
In your .less files, you can add special comments to flag Less variables to be
exported as runtime-editable CSS variables. The special comment syntax is the
@export preceeding the variable declaration.
There are a few valid ways of adding the comment, as shown below:
/* @export */ @header-bg: #ffffff; // @export @navbar-text: #333333; /*@export*/ @navbar-height: 56px;
Compiling with Exported Variables
Once you've installed the css-george plugin, you can simply add
lessc command and it will generate an output .css file with the
exported variables defined as CSS variables.
lessc --css-george ./src/less/main.less ./www/css/style.css
In Less 3, you can also load the plugin with the
@plugin directive in your
Compiling with Hardcoded Fallback values
For browsers that don't support native CSS variables, you can tell the css-george plugin to export a property twice: once with the original value hardcoded, and again with the custom property. Be aware that this may cause sourcemaps to become inaccurate.
lessc --css-george="fallback=true" ./src/less/main.less ./www/css/style.css
In Less 3, you can also specify this via the
@plugin (fallback=true) 'css-george';
Because the Less variables are replaced at compile-time with CSS expressions, Less functions that expect colour values will fail. In particular, functions like
fadeare incompatible with native CSS variables.
For similar reasons, the native math support in Less will be unable to perform compile-time calculations with native CSS variables. As a workaround, you can use the CSS
CSS variable support is only in bleeding edge browsers right now:
- Chrome 49+
- Firefox 31+
- Safari 9.1+
- Edge 15+
- iOS 9.3+
- Android 5.0+
Colours must be defined in hexadecimal notation for the colour picker widget in the CSS George editor to work. Non hexadecimal colours will be editable via a text input.
Contributions of bug reports, feature requests, and pull requests are greatly appreciated!
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Copyright © 2017 Darryl Pogue Licensed under the MIT Licence.