Indent-based CSS syntax for PostCSS
npm install sugarss title="SugarSS logo by Maria Keller"
src="http://postcss.github.io/sugarss/logo.svg">
Indent-based CSS syntax for [PostCSS].
``sass
a
color: blue
.multiline,
.selector
box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
1px 0 3px rgba(0, 0, 0, .6)
// Mobile
@media (max-width: 400px)
.body
padding: 0 10px
`
As any PostCSS custom syntax, SugarSS has source map, [stylelint]
and [postcss-sorting] support out-of-box.
It was designed to be used with [postcss-simple-vars] and [postcss-nested].
But you can use it with any PostCSS plugins
or use it without any PostCSS plugins.
With [postcss-mixins] you can use @mixin` syntax as in Sass.
alt="Sponsored by Evil Martians" width="236" height="54">
[postcss-mixins]: https://github.com/postcss/postcss-mixins
[postcss-nested]: https://github.com/postcss/postcss-nested
[postcss-simple-vars]: https://github.com/postcss/postcss-simple-vars
[postcss-sorting]: https://github.com/hudochenkov/postcss-sorting
[stylelint]: http://stylelint.io/
[PostCSS]: https://github.com/postcss/postcss