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

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

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

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

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

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

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)
 

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('10px + 10');
// outputs 20px

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

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