.config/coc/extensions/node_modules/coc-prettier/node_modules/sugarss/README.md

   1 # SugarSS [![Build Status][ci-img]][ci]
   2
   3 <img align="right" width="120" height="155"
   4      title="SugarSS logo by Maria Keller"
   5      src="http://postcss.github.io/sugarss/logo.svg">
   6
   7 Indent-based CSS syntax for [PostCSS].
   8
   9 ```sass
  10 a
  11   color: blue
  12
  13 .multiline,
  14 .selector
  15   box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
  16               1px 0 3px rgba(0, 0, 0, .6)
  17
  18 // Mobile
  19 @media (max-width: 400px)
  20   .body
  21     padding: 0 10px
  22 ```
  23
  24 As any PostCSS custom syntax, SugarSS has source map, [stylelint]
  25 and [postcss-sorting] support out-of-box.
  26
  27 It was designed to be used with [PreCSS] and [postcss-nested-props].
  28 But you can use it with any PostCSS plugins
  29 or use it without any PostCSS plugins.
  30 With [gulp-sass-to-postcss-mixins] you can use `+mixin` syntax as in Sass.
  31
  32 <a href="https://evilmartians.com/?utm_source=sugarss">
  33   <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
  34        alt="Sponsored by Evil Martians" width="236" height="54">
  35 </a>
  36
  37 [gulp-sass-to-postcss-mixins]:  https://github.com/akella/gulp-sass-to-postcss-mixins
  38 [postcss-nested-props]:        https://github.com/jedmao/postcss-nested-props
  39 [postcss-sorting]:             https://github.com/hudochenkov/postcss-sorting
  40 [stylelint]:                   http://stylelint.io/
  41 [PostCSS]:                     https://github.com/postcss/postcss
  42 [PreCSS]:                      https://github.com/jonathantneal/precss
  43 [ci-img]:                      https://img.shields.io/travis/postcss/sugarss.svg
  44 [ci]:                          https://travis-ci.org/postcss/sugarss
  45
  46 ## Syntax
  47
  48 SugarSS MIME-type is `text/x-sugarss` with `.sss` file extension.
  49
  50 ### Indent
  51
  52 We recommend 2 spaces indent. However, SugarSS autodetects indent
  53 and can be used with tabs or spaces.
  54
  55 But it is prohibited to mix spaces and tabs in SugarSS sources.
  56
  57 ### Multiline
  58
  59 SugarSS was designed to have intuitively multiline selectors and declaration
  60 values.
  61
  62 There are 3 rules for any types of nodes:
  63
  64 ```sass
  65 // 1. New line inside brackets will be ignored
  66 @supports ( (display: flex) and
  67             (display: grid) )
  68
  69 // 2. Comma at the end of the line
  70 @media (max-width: 400px),
  71        (max-height: 800px)
  72
  73 // 3. Backslash before new line
  74 @media screen and \
  75        (min-width: 600px)
  76 ```
  77
  78 In selector you can put a new line anywhere. Just keep same indent
  79 for every line of selector:
  80
  81 ```sass
  82 .parent >
  83 .child
  84   color: black
  85 ```
  86
  87 In declaration value you can put new line anywhere. Just keep bigger indent
  88 for value:
  89
  90 ```sass
  91 .one
  92   background: linear-gradient(rgba(0, 0, 0, 0), black)
  93               linear-gradient(red, rgba(255, 0, 0, 0))
  94
  95 .two
  96   background:
  97     linear-gradient(rgba(0, 0, 0, 0), black)
  98     linear-gradient(red, rgba(255, 0, 0, 0))
  99 ```
 100
 101 ### Comments
 102
 103 SugarSS supports two types of comments:
 104
 105 ```sass
 106 /*
 107  Multiline comments
 108  */
 109
 110 // Inline comments
 111 ```
 112
 113 There is no “silent” comments in SugarSS. Output CSS will contain all comments
 114 from `.sss` source. But you can use [postcss-discard-comments]
 115 for Sass’s silent/loud comments behaviour.
 116
 117 [postcss-discard-comments]: https://www.npmjs.com/package/postcss-discard-comments
 118
 119 ### Rule and Declarations
 120
 121 SugarSS separates selectors and declarations by `:\s` or `:\n` token.
 122
 123 So you must write a space after property name: `color: black` is good,
 124 `color:black` is prohibited.
 125
 126 ## Text Editors
 127
 128 * SublimeText: [Syntax Highlighting for .SSS SugarSS]
 129 * Atom: [language-postcss], [source-preview-postcss] and [build-sugarss]
 130 * Vim: [vim-sugarss]
 131
 132 We are working on syntax highlight support in text editors.
 133
 134 Right now, you can set `Sass` or `Stylus` syntax highlight for `.sss` files.
 135
 136 [Syntax Highlighting for .SSS SugarSS]: https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20SSS%20SugarSS
 137 [source-preview-postcss]:          https://atom.io/packages/source-preview-postcss
 138 [language-postcss]:                https://atom.io/packages/language-postcss
 139 [build-sugarss]:                   https://atom.io/packages/build-sugarss
 140 [vim-sugarss]:                     https://github.com/hhsnopek/vim-sugarss
 141
 142 ## Usage
 143
 144 Install SugarSS via npm:
 145
 146 ```sh
 147 npm install sugarss --save-dev
 148 ```
 149
 150 ### SugarSS to CSS
 151
 152 Just set SugarSS to PostCSS `parser` option and PostCSS will compile
 153 SugarSS to CSS.
 154
 155 [Gulp](https://github.com/postcss/gulp-postcss):
 156
 157 ```js
 158 var sugarss = require('sugarss');
 159 var postcss = require('gulp-postcss');
 160 var rename  = require('gulp-rename');
 161
 162 gulp.task('style', function () {
 163     return gulp.src('src/**/*.sss')
 164         .pipe(postcss(plugins, { parser: sugarss }))
 165         .pipe(rename({ extname: '.css' }))
 166         .pipe(gulp.dest('build'));
 167 });
 168 ```
 169
 170 [Webpack](https://github.com/postcss/postcss-loader):
 171
 172 ```js
 173 module: {
 174     loaders: [
 175         {
 176             test:   /\.sss/,
 177             loader: "style-loader!css-loader!postcss-loader?parser=sugarss"
 178         }
 179     ]
 180 }
 181 ```
 182
 183 [CLI](https://github.com/postcss/postcss-cli):
 184
 185 ```
 186 postcss -u autoprefixer -p sugarss test.sss -o test.css
 187 ```
 188
 189 ### SugarSS to SugarSS
 190
 191 Sometimes we use PostCSS not to build CSS, but to fix source file.
 192 For example, to sort properties by [postcss-sorting].
 193
 194 For this cases, use `syntax` option, instead of `parser`:
 195
 196 ```js
 197 gulp.task('sort', function () {
 198     return gulp.src('src/**/*.sss')
 199         .pipe(postcss([sorting], { syntax: sugarss }))
 200         .pipe(gulp.dest('src'));
 201 });
 202 ```
 203
 204 [postcss-sorting]: https://github.com/hudochenkov/postcss-sorting
 205
 206 ### CSS to SugarSS
 207
 208 You can even compile existed CSS sources to SugarSS syntax.
 209 Just use `stringifier` option instead of `parser`:
 210
 211 ```js
 212 postcss().process(css, { stringifier: sugarss }).then(function (result) {
 213     result.content // Converted SugarSS content
 214 });
 215 ```
 216
 217 ### Imports
 218
 219 [postcss-import] doesn’t support `.sss` file extension, because this plugin
 220 implements W3C specification. If you want smarter `@import`, you should
 221 use [postcss-easy-import] with `extensions` option.
 222
 223 ```js
 224 var postcssPlugin = [
 225   easyImport({ extensions: ['.sss'] })
 226 ]
 227 ```
 228
 229 [postcss-easy-import]: https://github.com/TrySound/postcss-easy-import
 230 [postcss-import]:      https://github.com/postcss/postcss-import
 231
 232 ## Thanks
 233
 234 Cute project logo was made by [Maria Keller](http://www.mariakellerac.com/).