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.