less-plugin-remcalc
Simply adds rem-base
and rem-calc
functions to LESS.
Installation
yarn add --dev less-plugin-remcalc
Usage
lessc
On the command line:
lessc file.less --remcalc
node
var remcalc = ; less;
grunt (grunt-contrib-less)
Register the plugin in your Gruntfile.js
:
less: options: plugins:
webpack (less-loader)
var RemcalcPlugin = ; moduleexports = ... lessLoader: lessPlugins: RemcalcPlugin ;
Examples
Basic
.card min-width: rem-calc64px; .card min-width: rem-calc64;
Overriding the rem base
Default base is 16px
but you can override it at any time (here with 12px
):
.card padding: rem-calc20px, 12px;
You can also act globally on the rem base, using:
@rem-base: rem-base10px; // will globally override the rem base. .card min-width: rem-calc20px; // is now equivalent to rem-calc(20px, 10px);