SASS:

Syntactically Awesome StyleSheets

Amanda Giles

http://slides.com/amanda_giles/sass

What is it?

SASS is a preprocessor for CSS. It adds great functionality and better organization for your CSS files.

With SASS, you can:

• Use variables
• Nest statements
• Use inheritance between objects
• Use partial files to modularize code
• Use @import statements without creating HTTP calls
• Create and reuse groups of CSS declarations (Mixins)
• Use mathematic operators
• Use various built-in functions to manipulate colors, numbers, etc.
• Write your own functions!

Syntax

2 Different syntaxes available:

• SASS - original indented syntax. Files end with .sass
• SCSS - Sassy CSS (newer). Extension/superset of CSS3 syntax. Files end with .scss 

• There is a command line tool that allows files to be converted from one to the other.
• You can even mix syntax types within a project, just not within a single file.
• Most sites seem to use SCSS in their examples and so will our examples.

Using SASS

Installation will depend on your OS, whether you use Ruby, and personal preferences. You can install it as:

• command-line tool
• standalone Ruby module
• plugin for Ruby
• other GUI applications (I use Koala - http://koala-app.com/)

Compass

Compass is an open-source CSS authoring framework. SASS and Compass are both written in Ruby.

Compass is:

• a library of SASS mixins and utilities
• a system for integrating with application environments
• a platform for building frameworks and extensions

Compass does a bunch of helpful stuff which makes it easier to write and compile SASS, in particular it has great settings for working around cross-browser quirks.

Variables

Variables can be used so you can re-use values without repeating yourself.

//Fonts
$fontPath : "http://mycompany.com/fonts";

$sans-serif:        Tahoma, Verdana, Geneva, sans-serif;
$serif:             "Georgia", Cambria, Times New Roman, Times, serif;

$default-font-size: 14px;

//Colors
$text-color: #474747;
$link-color: #239399;
$link-hover-color: #61d5db;

body {
	font-family: $sans;
	font-size: $default-font-size;
	color: $text-color;
}

a, a:visited { color: $link-color; }
a:hover, a:focus { color: $link-hover-color; }

Variables (compiled)

body {
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #474747;
}

a, a:visited { color: #239399; }
a:hover, a:focus { color: #61d5db; }

Nested Statements

CSS declarations can be nested within one another.

nav {
    margin: 15px 0;

    ul {
        float: left;
        list-style-type:none;

        li {
            background-color: #88888;

            &:hover {
                background-color: #55555;
            }
        }
    }
}

Nested Statements (compiled)

nav {
    margin: 15px 0;
}

nav ul {
    float: left;
    list-style-type:none;
}

nav ul li {
    background-color: #88888;
}

nav ul li:hover {
    background-color: #55555;
}

Inheritance

The @extend statement can be used to apply styles to a new selector without repeating them.

.large-text {
    font-size: 24px;
    line-height: 1.5;
}
.message {
    border: 1px solid #008798;
}
.error {
    @extend .message;
    @extend .large-text;
    border-color: red;
    color: red;
}

Inheritance (compiled)

.large-text, .error {
    font-size: 24px;
    line-height: 1.5;
}
.message, .error {
    border: 1px solid #008798;
}
.error {
    border-color: red;
    color: red;
}

Partial Files / @import

• You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. 
• Partial files begin with underscores and this signifies to the SASS compiler that they shouldn't be compiled into a separate CSS file.
• The @import statement does not include the underscore
• @import is not treated as a separate HTTP request, but is instead incorporated into the output CSS

@import Example

// _reset.scss

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

/* base.scss */

@import 'reset';

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

/* base.css */

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

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

Mixins

• Mixins allow you to group CSS declarations together so you can re-use them by referencing the name.
• You can even pass values into Mixins to generate dynamic values.

// Declare the Mixin
@mixin css-gradient($from, $to) {
    background-color: $to;
    background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
    background-image: -webkit-linear-gradient(top, $from, $to);
    background-image: -moz-linear-gradient(top, $from, $to);
    background-image: -o-linear-gradient(top, $from, $to);
    background-image: linear-gradient(to bottom, $from, $to);
}

// Call the Mixin
.wrapper {
    @include css-gradient(#dfdfdf,#f8f8f8);
}

Mixin Example

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wrapper .message {
  @include vertical-align;
}

Operators

Operators (+, -, *, /, %) can be used in a similar manner as they are in scripting languages

nav {
        $nav-width: 1000px;
        $nav-links: 5;
        width: $nav-width;

        li {
                float: left;
                width: $nav-width/$nav-links - 10px;
        }
}

nav {
        width: 1000px;
}
nav li {
    float: left;
    width: 190px;
}

Compiles into:

Functions

There are a huge number of functions built into SASS. Many of these center around colors or numbers:

• hsl($hue, $saturation, $lightness) 
• lighten($color, $amount)
• darken($color, $amount)
• desaturate($color, $amount)
• invert($color) 
• round($number)
• ceil($number)
• floor($number)
• variable-exists($name)
• unit($number)
• if($condition, $if-true, $if-false) 

Function Example

$link-color : #008798;

a, a:visited {
    color: $link-color;
}
a:hover, a:focus {
    color: lighten($link-color,25%);
}

a, a:visited {
    color: #008798;
}
a:hover, a:focus {
    color: #19e5ff;
}

Compiles into:

Cool Stuff to Check Out

• SASS Documentation : 

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

• The Sass Way: http://thesassway.com/
• Sassmeister: http://sassmeister.com/
• Compass Help & Docs: http://compass-style.org/help/

Code Pen Example of some SASS: 

http://codepen.io/maxinacube/pen/tneEq

Sass & Compass Color Functions: http://jackiebalzer.com/color