Sass & Compass
description
Transcript of Sass & Compass
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