Used for shorthand for molten leading calculations in font, line-height, margins and more.
- Run
npm install postcss-molten --save
. - Add
require("postcss-molten")()
to your plugins array for PostCSS.
Based on the artical by Michael Riethmuller at Smashing Magazine.
html {
font-size: 12rem;
}
@media screen and (min-width: 30rem) {
html {
font-size: molten(12 22 30 55 'rem');
}
}
@media screen and (min-width: 55rem) {
html {
font-size: 22rem;
}
}
The plugin currently does not do any calculations of unit types. May add this feature in the future to make it easier to use. Below are example usage patterns both valid and invalid.
html {
/* With Commas */
font-size: molten(16, 22, 30, 45, 'rem');
/* Without Commas */
line-height: molten(1.4 1.8 30 40 'rem');
}
h1 {
/* Units Inline */
font-size: molten(22em 36em 30em 45em);
/* No Units, defaults to REM - Note: throws warning, but not error) */
margin-bottom: molten(1.5 3.0 20 50);
}
p {
/* Oddity - Only one unit needs specified as long as there
are no conflicting units it will be used for all entries. */
margin-bottom: molten(2rem 4 20 50);
}
blockquote {
/* Invalid! - Do not mix units */
font-size: (18rem 22rem 320px 720px);
/* May add conversion in the future, with the goal to
convert to rem if no unit specified in 5 param spot */
}
Make sure you include this plugin below postcss-cssnext
plugin in your plugins array if you want to use var()
.