SASS

style with attitude

Why do we need a preprocessor?

CSS is getting cooler but it's still not a language
Editing styles.css doesn't scale

Add logic
Easily minify
Delegate maintenance responsibilities

How to install

SASS is just a Ruby gem


$ gem install sass
$ gem install compass

Easy, right?

Run commands through Compass


$ compass create <projectname>

Configuration

/config.rb is the control panel for compass settings


# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Additional Configuration

Compass offers a ton of of settings for you to configure: http://compass-style.org/help/tutorials/configuration-reference

Use variables in your SCSS


$red: #b75548;
a {
    color: $red;
}

compiles to:


a {
    color: #b75548;
}

functions rule, math sucks!

instead of pulling out your calculator...


$baseFont: 16;

body {
    font-size: 16px;
}

.content p {
    font-size: 0.8125em; /* 13px / 16px */
}


@function em($value, $context:$baseFont) {
    @return ($value / $context) * 1em;
}

.content p {
    font-size: em(13);
}

compiles to:


.content p {
    font-size: 0.8125em;
}

mixins

Sometimes (oftentimes) you want to repeat a set of styles


.content p {
    font-family: "Goudy Old Style", Garamond,
                 "Big Caslon", "Times New Roman", serif;
}

yeah, no thanks


$goudy: "Goudy Old Style", Garamond,
        "Big Caslon", "Times New Roman", serif;
@mixin fontSerif($weight:normal) {
    font-family: $goudy;
    font-weight: $weight;
}
.content p {
    @include fontSerif(700);
}

compiles to:


.content p {
    font-family: "Goudy Old Style", Garamond,
                 "Big Caslon", "Times New Roman", serif;
    font-weight: 700;
}

extends


.square {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
}

.circle {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
    border-radius: 100%;
}

extends continued... stay DRY


.square {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
}

.circle {
    @extend .square;
    border-radius: 100%;
}

compiles to:


.square, .circle {
    background: red;
    width: 200px;
    height: 200px;
    border: 3px solid #fff;
}

.cricle {
    border-radius: 100%;
}

silent extends

what if there's css we don't need?


.button {
    padding: 5px 20px;
    border: 1px solid #fff;
    font-family: "Helvetica", arial, sans-serif;
}

.button-orange {
    @extend .button;
    background: #ffbb6b;
}


%button {
    padding: 5px 20px;
    border: 1px solid #fff;
    font-family: "Helvetica", arial, sans-serif;
}

.button-orange {
    @extend %button;
    background: #ffbb6b;
}

let's get boss status

environments

configure compass output based on your environment needs


if environment == :development
  line_comments = true
  output_style = :expanded
  line_comments = false
end

if environment == :production
  line_comments = true
  output_style = :compressed
end

then fire off your compass task


                        compass compile -e production --force

partials

know what's not fun? http requests


@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');

also not fun? browsing 6,000 lines of css to edit one line

enter partials

no more imports, file lengths are manageable & names are descriptive. no css in sceen.scss


sass
├── component
│   ├── _columns.scss
│   └── _signup.scss
├── lib
│   ├── _animation.scss
│   ├── _carousel.scss
│   ├── _mediaQueries.scss
│   └── _normalize.scss
├── screen.scss
└── section
    ├── _faq.scss
    ├── _feedback.scss
    ├── _footer.scss
    └── _sidebar.scss


// utility / helper
@import "compass";
@import "modules/_defaults";
@import "modules/_helpers";

// libraries
@import "lib/_mediaQueries";
@import "lib/_normalize";

// components
@import "component/_layout";
@import "component/_navigation";

SASS helper functions


a {
    color: pink;
    a &:hover {
        color: darken(pink, 20%);
    }
}


    percentage( 100px / 50px ) => 200%

Reference: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

did i mention?

i hate doing math


// layout
$siteWidth: 1000px;
$mainColumnWidth: 665px;
$mainColumnSpacing: 20px;

%column-left-of-two {
  width: $mainColumnWidth;
  padding: 0 $mainColumnSpacing 0 0;
  float: left;
}

// sidebar
%column-right-of-two {
  width: $siteWidth - ($mainColumnWidth + $mainColumnSpacing );
  float: left;
  padding: 0 0 0 $mainColumnSpacing;
}

flexible variables

don't be afraid to be verbose


$red: #ff0000;
a {
    color: $red;
}
.button {
    color: $red;
}
.container {
    border: 1px solid $red;
}

instead


// colors
$red: #ff0000;

// color reference
$mainAccent: $red;
a {
    color: $mainAccent;
}
.button {
    color: $mainAccent;
}
.container {
    border: 1px solid $mainAccent;
}

reference: http://sachagreif.com/sass-color-variables/

source maps

debugging can be awesome

recap

extensible
does work for you
constantly under development
use what you already know- can integrate nicely into existing workflow