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 ) ;

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

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

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

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

Lessly will also crawl objects and parse each value

lessly ( { myRule : ' fade(red, 90%) ' } ) ;

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 ' } ) ;

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 ' } ) ;

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) ' ) ; lesslyTheme . fade ( ' @my-color ' , . 9 ) ;

Dimensions

Dimensions made easy - basic operations are free too!

import { dimension } from ' lessly ' ; dimension ( 10 , ' px ' ) ; dimension ( ' 10px ' , ' px ' ) ; dimension ( ' 10px + 10 ' ) ; dimension ( ' 10px - ' , 5 ) ; dimension ( ' 10px ' , ' * 10 ' ) ; dimension ( 10 , ' + 10px ' ) ;

Lessly will also parse what looks like dimensions

lessly ( ' 10px + 10 ' ) ;

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

import { dimension } from ' lessly ' ; dimension ( { myRule : 10 } , ' px ' ) ; dimension ( { myRule : 10 } , ' + 10px ' ) ;

There's also handy shortcuts for every css unit.

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

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.