el-beeswarm
Version:
<div style="display: flex; padding: 1rem; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; display: flex;
235 lines (169 loc) • 6.16 kB
Markdown
<img align="right" width="120" height="155"
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 [PreCSS] and [postcss-nested-props].
But you can use it with any PostCSS plugins
or use it without any PostCSS plugins.
With [gulp-sass-to-postcss-mixins] you can use `+mixin` syntax as in Sass.
<a href="https://evilmartians.com/?utm_source=sugarss">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="Sponsored by Evil Martians" width="236" height="54">
</a>
[]: https://github.com/akella/gulp-sass-to-postcss-mixins
[]: https://github.com/jedmao/postcss-nested-props
[]: https://github.com/hudochenkov/postcss-sorting
[]: http://stylelint.io/
[]: https://github.com/postcss/postcss
[]: https://github.com/jonathantneal/precss
[]: https://img.shields.io/travis/postcss/sugarss.svg
[]: https://travis-ci.org/postcss/sugarss
SugarSS MIME-type is `text/x-sugarss` with `.sss` file extension.
We recommend 2 spaces indent. However, SugarSS autodetects indent
and can be used with tabs or spaces.
But it is prohibited to mix spaces and tabs in SugarSS sources.
SugarSS was designed to have intuitively multiline selectors and declaration
values.
There are 3 rules for any types of nodes:
```sass
// 1. New line inside brackets will be ignored
@supports ( (display: flex) and
(display: grid) )
// 2. Comma at the end of the line
@media (max-width: 400px),
(max-height: 800px)
// 3. Backslash before new line
@media screen and \
(min-width: 600px)
```
In selector you can put a new line anywhere. Just keep same indent
for every line of selector:
```sass
.parent >
.child
color: black
```
In declaration value you can put new line anywhere. Just keep bigger indent
for value:
```sass
.one
background: linear-gradient(rgba(0, 0, 0, 0), black)
linear-gradient(red, rgba(255, 0, 0, 0))
.two
background:
linear-gradient(rgba(0, 0, 0, 0), black)
linear-gradient(red, rgba(255, 0, 0, 0))
```
SugarSS supports two types of comments:
```sass
/*
Multiline comments
*/
// Inline comments
```
There is no “silent” comments in SugarSS. Output CSS will contain all comments
from `.sss` source. But you can use [postcss-discard-comments]
for Sass’s silent/loud comments behaviour.
[]: https://www.npmjs.com/package/postcss-discard-comments
SugarSS separates selectors and declarations by `:\s` or `:\n` token.
So you must write a space after property name: `color: black` is good,
`color:black` is prohibited.
* SublimeText: [Syntax Highlighting for .SSS SugarSS]
* Atom: [language-postcss], [source-preview-postcss] and [build-sugarss]
* Vim: [vim-sugarss]
We are working on syntax highlight support in text editors.
Right now, you can set `Sass` or `Stylus` syntax highlight for `.sss` files.
[]: https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20SSS%20SugarSS
[]: https://atom.io/packages/source-preview-postcss
[]: https://atom.io/packages/language-postcss
[]: https://atom.io/packages/build-sugarss
[]: https://github.com/hhsnopek/vim-sugarss
Install SugarSS via npm:
```sh
npm install sugarss --save-dev
```
Just set SugarSS to PostCSS `parser` option and PostCSS will compile
SugarSS to CSS.
[](https://github.com/postcss/gulp-postcss):
```js
var sugarss = require('sugarss');
var postcss = require('gulp-postcss');
var rename = require('gulp-rename');
gulp.task('style', function () {
return gulp.src('src/**/*.sss')
.pipe(postcss(plugins, { parser: sugarss }))
.pipe(rename({ extname: '.css' }))
.pipe(gulp.dest('build'));
});
```
[](https://github.com/postcss/postcss-loader):
```js
module: {
loaders: [
{
test: /\.sss/,
loader: "style-loader!css-loader!postcss-loader?parser=sugarss"
}
]
}
```
[](https://github.com/postcss/postcss-cli):
```
postcss -u autoprefixer -p sugarss test.sss -o test.css
```
Sometimes we use PostCSS not to build CSS, but to fix source file.
For example, to sort properties by [postcss-sorting].
For this cases, use `syntax` option, instead of `parser`:
```js
gulp.task('sort', function () {
return gulp.src('src/**/*.sss')
.pipe(postcss([sorting], { syntax: sugarss }))
.pipe(gulp.dest('src'));
});
```
[]: https://github.com/hudochenkov/postcss-sorting
You can even compile existed CSS sources to SugarSS syntax.
Just use `stringifier` option instead of `parser`:
```js
postcss().process(css, { stringifier: sugarss }).then(function (result) {
result.content // Converted SugarSS content
});
```
[] doesn’t support `.sss` file extension, because this plugin
implements W3C specification. If you want smarter `@import`, you should
use [postcss-easy-import] with `extensions` option.
```js
var postcssPlugin = [
easyImport({ extensions: ['.sss'] })
]
```
[]: https://github.com/TrySound/postcss-easy-import
[]: https://github.com/postcss/postcss-import
Cute project logo was made by [Maria Keller](http://www.mariakellerac.com/).