less-plugin-theme

keep only theme rules from less files

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
less-plugin-theme
100.1.18 years ago8 years agoMinified + gzip package size for less-plugin-theme in KB

Readme

less-plugin-theme
Keep only theme rules from less files

What it does

This plugin allows to write less like this: ```css button { display: block; width: 100%; line-height: 1.2; font-size: 14; border-radius: 4px; color: @input-color; / theme / background-color: @input-bg; / theme / border: 1px solid @input-border; / theme / } ``` and when run with lessc --theme file.less will keep only rules that are followed by a /* theme */ comment. ```css button { color: #000; background-color: #fff; border: 1px solid #ccc; } ```

Install

``` npm install -g less-plugin-theme ```

Usage

``` lessc --theme file.less ```

Without it (the initial problem)

If one wants to create css themes it has to create 2 files main.less ```css button { display: block; width: 100%; line-height: 1.2; font-size: 14; border-radius: 4px; color: @input-color; background-color: @input-bg; border: 1px solid @input-border; } ``` theme.less ```css button { color: @input-color; background-color: @input-bg; border: 1px solid @input-border; } ``` but on a large code base is hard to keep the files synchronized and chances are that something will be missed when something changes. Another option would be to write on the same file and use less guards. main.less ```css @style: true; @theme: true; button { & when (@style) {
display: block;
width: 100%;
line-height: 1.2;
font-size: 14;
border-radius: 4px;  
} & when (@theme) {
color: @input-color;
background-color: @input-bg;
border: 1px solid @input-border;
} } ``` but this is not exactly pretty and can be hard to follow especially on large classes.