SCSS

Syntactically Awesome Style Sheets

Wait A Minute...

Syntactically Awesome Style Sheets

S                        A                     S             S

!=

SCSS

SASS vs SCSS



  • Slightly Different Syntax
  • SCSS uses curly braces
  • SASS is whitespace sensitive
  • SCSS is "backwards-compatible" with CSS

Okay... But What is it?



  • CSS Preprocessor
    • Converts SCSS files to CSS
    • Adds features not currently in CSS
    • Allows better organization of files 
    • Think TypeScript, CoffeeScript, HAML, etc




Show it to me

CSS

.container .interesting-element {
    padding: 1em;
}

.container .interesting-element p {
    color: red;
}

.container .interesting-element span {
    text-decoration: underline;
}

SCSS

.container .interesting-element {
    padding: 1em;
    p {
        color: red;
    }
    span {
        text-decoration: underline;
    }
}

CSS

a {
    color: #fc3;
}

nav {
    background-color: #fc3;
}

SCSS

$brand-color: #fc3;
a {
    color: $brand-color;
}
nav {
    background-color: $brand-color;
}

Whoa That's Snazzy

What else?

  • Mixins
  • Imports
  • Partials
  • Inheritance/Extend
  • Math Operators

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }


Generated CSS

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Imports

// _reset.scss
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}

/* base.scss */
@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

CSS

html, body, ul, ol {
    margin: 0;
    padding: 0;
}

body {
    background-color: #efefef;
    font-size: 100% Helvetica, sans-serif;
}

Partials



  • Leading _ for filename
  • Designed to be imported
  • Mechanism for organization
  • Never directly pre-processed

Inheritance/Extend

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

Math Operators

.container { width: 100%; }

article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
    float: right;
    width: 300px / 960px * 100%;
}

How do I use it Today?

  • Rename all CSS files to SCSS
  • Does it work with Visual Studio?
    • YES!
    • Web Workbench (Paid)
    • Web Essentials 2.1 (Free)
    • NodeJS - Grunt/Gulp/Broccoli

Pitfalls



  • Don't nest your CSS to match your HTML
    • I've done it, it's a bad bad BAD idea
  • Don't nest more than 3 selectors 
    • Learn how CSS selector precedence works

Extras

  • Extensible via Compass and Bourbon
    • Provides additional Mixins
    • Requires Ruby
  • Compass app for Windows and OSX
  • CodeKit for OSX
  • JSFiddle support
  • No jsbin support :(

Resources


SCSS

By Ryan Hirsch

Made with Slides.com

SCSS

The ins and outs of SCSS.

  • 948

More from Ryan Hirsch