style

SNUGGSI.STYLE

Style

$ bin/style [component-directory | style-file.{sss,css}]

This routine will take component-directory as a parameter

Styling a Component

$ bin/style ./foo-bar

• (optional) Processes ./foo-bar/index.sss styles as Snuggsi Style Sheets
• Processes ./foo-bar/index.css styles as Cascading Style Sheets
• Outputs to STDOUT (Great for | pipe appending with classic CSS bundles)

Cascading Style Sheets

$ bin/style index.css

• Cross-platform CSS Properties support!
• Cross-platform CSS Grid support! (Yes IE11.0)

CSS Custom Properties

:root {
  --bad-ass-green: #bada55
}

body { /* Before */
  background: var(--bad-ass-green)
}


body /* After */
  { background: #bada55 }

CSS Grid

body { /* Before */

  /* Supports all CSS Grid properties */

  grid-template-areas: 'foo bar'
}


body { /* After */
  -ms-grid-template-areas: 'foo bar';
  grid-template-areas: 'foo bar'
}

Snuggsi Style Sheets

$ bin/style index.sss

• Inserts curly braces
• No need for semicolons (Inserts semi-colons ;)
• @import inline styles
• Removes comments from styles
• Indentation based stylesheets (Inserts curly braces { /* rules /* })