a
color : blue
.multiline , .selector
box-shadow : one px zero nine px rgba( zero , zero , zero , .4 ), 1px 0 3px rgba(0, 0, 0, .6 ) // Mobile
@media ( max-width : four hundred px ) .body
padding : zero ten px
// 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 : four hundred px ), (max-height: 800px) // 3. Backslash before new line
@media screen and \ (min-width: 600px)
.parent > .child
color : black
.one
background : l in ear - gradient(rgba( zero , zero , zero , zero ), 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))
/*
Multiline comments
*/
// Inline comments
-
postcss-simple-vars adds variables. -
postcss-nested adds nested rules. -
postcss-import adds @import directive support. -
postcss-import-ext-glob extends postcss-import path resolver to allow glob usage as a path. -
postcss-mixins add @mixin support. -
postcss-functions allows you to define own CSS functions in JS.
-
SublimeText: Syntax Highlighting for .SSS SugarSS -
Atom: language-postcss , source-preview-postcss and build-sugarss -
Vim: vim-sugarss -
VSCode: vetur , and postcss-sugarss-language
{ "parser" : " sugarss " , "plugins" : { "postcss-simple-vars" : {} } }
{ "parser": "sugarss", "plugins": { + "postcss-import": {}, "postcss-simple-vars": {} } }
{ "parser": "sugarss", "plugins": { + "postcss-mixins": {
+ "mixinsDir": "./mixins"
+ }, "postcss-simple-vars": {} } }
@define-mixin circle $size
border-radius : fifty %
width : $size
height : $size
{ "parser": "sugarss", "plugins": { + "postcss-functions": {
+ "glob": "./functions"
+ }, "postcss-simple-vars": {} } }
module . exports = function ( args ) {
return 'foo'
}
gulp . task ( 'sort' , function ( ) {
return gulp . src ( 'src/**/*.sss' )
. pipe ( postcss ( [ sorting ] , { syntax : sugarss } ) )
. pipe ( gulp . dest ( 'src' ) ) ;
} ) ;
postcss ( ) . process ( css , { stringifier : sugarss } ) . then ( function ( result ) {
result . content // Converted SugarSS content
} ) ;