So Sassy!

An introduction to Sass and Compass

Presenter: Andrew Koebbe

Andrew Koebbe
Lead Application Developer
PHP and Python

Ask me about...
  • Mandolin
  • DIY recipes
  • Ramen Hacking
  • MST3k
  • Sous Vide Cooking

What Sass Is...

  • A pre-compiler for your CSS (i.e. you end up with valid CSS)
    • Compile while developing and deployment
  • A superset of CSS
  • Written in Ruby (other implementations exist)
  • Allows for rapid development of styles
  • Allows for easily organizing code
  • Completely logical

What Sass is not

  • It doesn't require knowledge of Ruby
  • It's not a client side interpreter
  • It doesn't add client side overhead
  • It's not a framework
    • But there are ones available (Susy, Neat, Foundation, Bootstrap, etc)

Alternatives

  • Stylus (Node.js)
  • Less (Node.js or Client side JS)
  • Myth (Node.js)

What's it got?

SCSS & SASS Syntax

SCSS

(backward compatible with CSS. We'll use this today) 

article {
  font-size: 16px;
  color: blue;
{

SASS

(similar to ruby and python) 
article
  font-size: 16px
  color: blue

Variables

// Colors
$header-bg-color: #ffeeee;
$font-color: rgba(200,225,180,0.7);
$border-color: hsl(300, 75%, 50%);
// Units
$header-height: 30px;
$base-font-size: 2em;
// Strings and Lists
$cool-class: "way-cool";
$body-font-family: "Lato",Helvetica,Arial,sans-serif;

// Booleans
$is-this-thing-on: true;

// Maps
$header: (
  style: italic,
  weight: bold, 
)

Using Variables

SCSS
heading.#{$cool-class} {
  background-color: $header-bg-color;
  height: $header-height;
  @if $is-this-thing-on {
    font: $body-font-family;
  }
  font-style: map-get($header, style);
}

Compiled CSS 
heading.way-cool {
  background-color: #ffeeee;
  height: 30px;
  font: "Lato", Helvetica, Arial, sans-serif;
  font-style: italic;
}

Nesting

article {
  background-color: slateblue;
  h1 {
    font-family: sans-serif;
  }
  a {
    color: yellow;
    &:hover {
      font-weight: bold;
    }
  }
}
article {
  background-color: slateblue;
}
article h1 {
  font-family: sans-serif;
}
article a {
  color: yellow;
}
article a:hover {
  font-weight: bold;
}

Math OPERATORS

Standard Operators
// Unit Math (units must match)
$header-height: 80px + 20px;
$footer height: ($header-height / 2); //Put division in parenthesis
Color Math
// Color Math
$new-color: #bb33dd + #113311;
$another-color: #010203 * 2;
$dark-color: darken($another-color, 10);
Math Functions
// Math Functions
$rounded-number: round(1.5);
$floored-number: floor(1.9);

Extending selectors

Give a selector the same styles as an earlier one
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.serious-error {
  @extend .error;
  border-width: 3px;
}
Compiled CSS 
.error, .serious-error {
  border: 1px #f00;
  background-color: #fdd;
}

.serious-error {
  border-width: 3px;
}

Mixins

Mixins allow you to build a function that takes parameters
@mixin link-color($base-color, $border-width: 1px) {
  color: $base-color;
  &:hover {
    color: darken($base-color, 20);
    border-bottom: $border-width solid complement($base-color);
  }
}

a {
  @include link-color(yellow);
{

Compiled CSS

a {
  color: yellow;
}
a:hover {
  color: #999900;
  border-bottom: 1px solid blue;
}

Plugins/Libraries

Install

Mac
$ sudo gem install sass
Linux (Ubuntu)
$ sudo apt-get install ruby
$ sudo gem install sass
Windows
http://rubyinstaller.org/ 
 C:\>gem install sass

Demo Time!

Danger: Live coding ahead!

Questions?

So Sassy

By akoebbe

Made with Slides.com

So Sassy

  • 3,740

More from akoebbe