Use Sass-like markup in CSS, based on PostCSS with only up to date and essential plugins. Inspired by Precss.
npm install msops-cssPrecss is a nice collection of PostCSS plugins. But some of the features it provides are rarely used (extend, atroot, custom-properties...) and I do miss other features like calc and on.
PreCSS blends Sass-like strength with W3C future-syntax superpower, powered by the following plugins (in this order):
- [postcss-import]: Transform @import rules by inling content
- [postcss-mixins]: Sass-like mixins
- [postcss-advanced-variables]: Sass-like variables and methods
- [postcss-calc]: Reduce calc()
- [postcss-custom-media]: W3C custom media queries
- [postcss-media-minmax]: W3C < <= >= > media queries
- [postcss-color-function]: W3C color methods
- [postcss-nesting]: W3C nested selectors
- [postcss-nested]: Sass-like nested selectors
- [postcss-property-lookup]: reference other property values
- [postcss-selector-matches]: W3C multiple matches pseudo-classes
- [postcss-selector-not]: W3C multiple not pseudo-classes
[postcss-advanced-variables]: https://github.com/jonathantneal/postcss-advanced-variables
[postcss-custom-properties]: https://github.com/postcss/postcss-custom-properties
[postcss-custom-selectors]: https://github.com/postcss/postcss-custom-selectors
[postcss-selector-matches]: https://github.com/postcss/postcss-selector-matches
[postcss-property-lookup]: https://github.com/simonsmith/postcss-property-lookup
[postcss-color-function]: https://github.com/postcss/postcss-color-function
[postcss-custom-media]: https://github.com/postcss/postcss-custom-media
[postcss-media-minmax]: https://github.com/postcss/postcss-media-minmax
[postcss-selector-not]: https://github.com/postcss/postcss-selector-not
[postcss-nesting]: https://github.com/jonathantneal/postcss-nesting
[postcss-mixins]: https://github.com/postcss/postcss-mixins
[postcss-nested]: https://github.com/postcss/postcss-nested
[postcss-import]: https://github.com/postcss/postcss-import
[postcss-calc]: https://github.com/postcss/postcss-calc