https://github.com/lifeiscontent/postcss-rem-function

PostCSS plugin to add rem function to easily calculate rem values
https://github.com/lifeiscontent/postcss-rem-function

Last synced: 3 days ago
JSON representation

PostCSS plugin to add rem function to easily calculate rem values

• Host: GitHub
• URL: https://github.com/lifeiscontent/postcss-rem-function
• Owner: lifeiscontent
• License: mit
• Created: 2020-07-26T03:44:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T12:28:01.000Z (almost 2 years ago)
• Last Synced: 2024-09-25T21:49:10.941Z (about 2 months ago)
• Language: JavaScript
• Size: 680 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Rem Function

[PostCSS] plugin to add rem function to easily calculate rem values.

## Example

### Input

```scss

.demo {

  font-size: rem(24); /* using default 16 */

  padding: rem(5, 10); /* Explict base */

}

```

### Output

```css

.demo {

  font-size: 1.5rem; /* Simple */

  padding: 0.5rem; /* Explict base */

}

```

## Options

With `baseline` to `10`:

```css

.demo {

  font-size: 2.4rem; /* Simple */

  padding: 0.5rem; /* Multiple values */

}

```

## Usage

Install with `npm i postcss-rem-function` and use with [PostCSS]:

```js

postcss([require("@lifeiscontent/postcss-rem-function")]);

```

Example with custom options:

```js

postcss([

  require("@lifeiscontent/postcss-rem-function")({

    baseline: 10, // Default to 16

    precision: 6, // Default to 8

  }),

]);

```

See [PostCSS] docs for examples for your environment.

[postcss]: https://github.com/postcss/postcss