less-plugin-remcalc

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
less-plugin-remcalc
000.1.04 years ago6 years agoMinified + gzip package size for less-plugin-remcalc in KB

Readme

less-plugin-remcalc
OVH component
Simply adds rem-base and rem-calc functions to LESS.
NPM

Installation

yarn add --dev less-plugin-remcalc

Usage

lessc

On the command line:
lessc file.less --remcalc

node

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

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

grunt (grunt-contrib-less)

Register the plugin in your Gruntfile.js:
less: {
    options: {
        plugins: [
            require('less-plugin-remcalc')
        ]
    }
}

webpack (less-loader)

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

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

Examples

Basic

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

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

Overriding the rem base

Default base is 16px but you can override it at any time (here with 12px):
.card {
  padding: rem-calc(20px, 12px);
}

You can also act globally on the rem base, using:
@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);
}