lessly

Less Standalone Functions

Use less color functions without less.

Installation

% npm install lessly

Usage

Lessly is a hack around the color manipulation functions in Less.

import {fade} from 'lessly';
 
fade('red', .9);
// outputs rgba(255, 0, 0, 0.9)

Alternatively, you can pass in any entity string that less would normally process.

import lessly from 'lessly';
 
lessly('fade(red, .9)');
// outputs rgba(255, 0, 0, 0.9)

These operations happen recursively, so feel free to use any less color function.

import lessly from 'lessly';
 
lessly('red(fade(red, .9))');
// outputs 255

Lessly will also crawl objects and parse each value

lessly({
    myRule: 'fade(red, 90%)'
});
// outputs {myRule: 'rgba(255, 0, 0, 0.9)'}

Variables

For entity parsing, you can pass in variables to be swapped out with a params object

import lessly from 'lessly';
 
lessly('fade(@mycolor, .9)', {mycolor: 'blue'});
// outputs rgba(0, 0, 255, 0.9)

In keeping the React style convention, we'll also check camel case variables against dash variables.

import lessly from 'lessly';
 
lessly('fade(@my-color, .9)', {myColor: 'blue'});
// outputs rgba(0, 0, 255, 0.9)

Themes

If you have an existing color configuration, we can bind these vars to all lessly calls.

import {theme} from 'lessly';
 
const lesslyTheme = theme({myColor: 'blue'});
 
lesslyTheme('fade(@my-color, .9)');
// outputs rgba(0, 0, 255, 0.9)
 
lesslyTheme.fade('@my-color', .9);
// outputs rgba(0, 0, 255, 0.9)
 

Dimensions

Dimensions made easy - basic operations are free too!

import {dimension} from 'lessly'; // or dim for short
 
 
dimension(10, 'px');
// outputs 10px
 
dimension('10px', 'px');
// outputs 10px
 
dimension('10px + 10');
// outputs 20px
 
dimension('10px -' , 5);
// outputs 5px
 
dimension('10px' , ' * 10');
// outputs 100px
 
dimension(10 , ' + 10px');
// outputs 20px
 

Lessly will also parse what looks like dimensions

lessly('10px + 10');
// outputs 20px

We'll also recurse any object and apply operations to child values

import {dimension} from 'lessly'; // or dim for short
 
 
dimension({
    myRule: 10
}, 'px');
// outputs {myRule: '10px'}
 
dimension({
    myRule: 10
}, '+ 10px');
// outputs {myRule: '20px'}
 

There's also handy shortcuts for every css unit.

import {px, percent, inch, mm, vh, vw, rad, pt, cm} from 'lessly';
 
px(10);
// outputs 10px
 
percent(10);
// outputs 10%
 
inch(10);
// outputs 10in
 
mm(10);
// outputs 10mm
 
vh(10);
// outputs 10vh
 
vw(10);
// outputs 10vw
 
rad(10);
// outputs 10rad
 
pt(10);
// outputs 10pt
 
cm(10);
// outputs 10cm
 

Further Documentation

Check out the less color definition functions. Every color definition function is supoorted.

The function list with sample arguments is available at test/functions.js.

lessly is free software under the MIT license. It was created in sunny Santa Monica by Matthew Drake.