less-plugin-remcalc

!OVH component

Simply adds rem-base and rem-calc functions to LESS.


Installation

``
yarn add --dev less-plugin-remcalc
`

Usage

$3

On the command line:

`
lessc file.less --remcalc
`

$3

`js
var remcalc = require('less-plugin-remcalc');

less.render(data, { plugins: [remcalc] }).then(...);
`

$3

Register the plugin in your Gruntfile.js:

`js
less: {
options: {
plugins: [
require('less-plugin-remcalc')
]
}
}
`

$3

`js
var RemcalcPlugin = require('less-plugin-remcalc');

module.exports = {
...
lessLoader: {
lessPlugins: [
RemcalcPlugin
]
}
};
`

Examples

$3

`less
.card {
min-width: rem-calc(64px);
}

.card {
min-width: rem-calc(64);
}
`

$3

Default base is 16px but you can override it at any time (here with 12px):

`less
.card {
padding: rem-calc(20px, 12px);
}
`

You can also act globally on the rem base, using:

`less
@rem-base: rem-base(10px); // will globally override the rem base.

.card {
min-width: rem-calc(20px); // is now equivalent to rem-calc(20px, 10px);
}
``