Sass & CompassCPSC 473 – Spring 2011

Charles WangBryan Perez

SassO “Syntactically Awesome

Stylesheets”O Built with RubyO Is an extension of CSS3O Dynamic CSSO Write CSS like a programmer

O variablesO inheritanceO mixins & parameters

Installing Sass & Compass

O Ruby 1.8.7 or greaterO Ruby gems installedO gem install sass O gem install compass

Two different formats of Sass

O .scss – utilizes the CSS syntax most people are familiar with (braces and semicolons)

O .sass – whitespace-aware indented syntax (similar to what you see in Python)

Keeping it DRY - Variables

$company-blue: #1875e7;

h1#brand { color: $company-blue;}

#sidebar { background-color: $company-blue;}

Nesting

ul.nav { float: right;}ul.nav li { float: left;}ul.nav li a { color: #111;} ul.nav li.current { font-weight: bold;}

ul.nav { float: right; li { float: left; a { color: #111; } &.current { font-weight: bold; } }}

Note: ‘&’ represents the parent of that selector

CSS Sass

Mixins w/ Params@mixin horizontal-list($spacing: 10px) { li { float: left; margin-right: $spacing; }}

#header ul.nav { @include horizontal-list; float: right;}

#footer ul.nav { @include horizontal-list(20px); margin-top: 1em;}

InheritanceSASS CSS

.error { border: 1px #f00; background: #fdd;}

.error.intrusion { font-size: 1.2em; font-weight: bold;}

.badError{ @extend .error; border-width: 3px;}

.error, .baderror { border: 1px #f00; background: #fdd;}

.error.intrusion,

.badError.intrusion { font-size: 1.2em; font-weight: bold;}

.badError { border-width: 3px;}

Interpolation$side = top;$radius = 10px;

.rounded- { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}

CompassO A framework that uses SassO Provides tools and configuration

options for things outside of Ruby on Rails (Django, .NET, Drupal)

O Tell Compass where your resources are located and where to reference them

O Contains libaries of stylesheets

Features of CompassO CSS ResetsO CSS Frameworks

O Compass CoreO BlueprintO 960 GSO SusyO YUI

O Table HelpersO CSS3 HelpersO SpritesO Plugins

O LemonadeO Fancy-ButtonsO ColorsO Less

Working with Compass

O compass create sample

O compass init rails /my/path/here –

options

O compass watch

Importing example@import "compass/css3”

.rounded { @include border-radius(5px);}

rounded { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}

ReferencesO www.sass-lang.comO http://compass-style.org/O https://github.com/nex3/sassO https://github.com/chriseppstein/

compassO http

://peepcode.com/products/haml-and-sassO “Sass and Compass In Action”, Manning

Publications, 2011