Why use SASS?

Some examples:

Variables

								$red: #ff0b13;
								$blue: #091fff;
								$green: #11c909;
							
							

								.i-want-to-be-green {
								  color: $green;
								}
							
							

Vendor prefixes

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

								.rounded {
								  -webkit-border-radius: 4px;
								  -moz-border-radius: 4px;
								  -ms-border-radius: 4px;
								  -o-border-radius: 4px;
								  border-radius: 4px;
								}
							
							

Nesting rules

								nav {
								  a {
								    color: $red;
								    &:hover {
								      color: $green;
								    }
								    &:visited {
								      color: $blue;
								    }
								  }
								}
							
							

								nav a {
								  color: #ff0b13;
								}
								nav a:hover {
								  color: #11c909;
								}
								nav a:visited {
								  color: #091fff;
								}
							
							

Media queries

								@media only screen and (min-width: 280px) and (max-width: 479px) {
								  .h1 {
								    font-size: 1.1em;
								  }
								}
								@media only screen and (min-width: 600px) and (max-width: 767px) {
								  .h1 {
								    font-size: 0.9em;
								  }
								}
							
							

								h1 {
								  @include MQ(XS) {
								    font-size: 1.1em;
								  }
								  @include MQ(M) {
								    font-size: 0.9em;
								  }
								}
							
							

Why use Compass?

Some examples:

With Sass, you have to roll your own mixins:

								@mixin border-radius($radius) {
								  -webkit-border-radius: $radius;
								    -moz-border-radius: $radius;
								      -ms-border-radius: $radius;
								        border-radius: $radius;
								}

								.box { @include border-radius(10px); }
							
							

Compass comes bundled with a CSS3 module that includes all these mixins, so you just:

								.box { @include border-radius(10px); }
							
							

Compass also comes with a typography module, so you can do things like this;

								a {
								  // link colors (normal, hover, active, visited, focus)
								  @include link-colors(red, blue, grey, red, blue);
								}
							
							

Prerequisite: installing Ruby

Both SASS and Compass are Ruby "gems" (Ruby applications or plugins).

Windows users: http://rubyinstaller.org/downloads/

Installing Compass

Compass is a framework that offers reusable patterns (think of it like a jQuery for SASS). When you install Compass, it automatically includes SASS.

Windows users: from the Ruby command line, type:

								
									gem install compass --pre
								
							

Mac users: from the Terminal, type:

								
									sudo gem install compass --pre
								
							

config.rb file

This file is automatically created and looks like this:

								
									# Require any additional compass plugins here.

									# Set this to the root of your project when deployed:
									http_path = "/"
									css_dir = "css"
									sass_dir = "sass"
									images_dir = "img"
									javascripts_dir = "js"

									# You can select your preferred output style here (can be overridden via the command line):
									# output_style = :expanded or :nested or :compact or :compressed

									# To enable relative paths to assets via compass helper functions. Uncomment:
									# relative_assets = true

									# To disable debugging comments that display the original location of your selectors. Uncomment:
									# line_comments = false

								
							

making changes to config.rb

When making changes to the config.rb file, particularly output style, it's sometimes necessary to clear the.sass-cache before expected changes will be seen. In this instance, either manually delete the sass-cache folder and it will be recreated next time a Sass file is saved, or run the following command from the command line:

							compass clean
							

Setting the CSS output style

If you don't set an output style in config.rb, Sass and Compass produce rules in this format:

							/* line 8, ../sass/styles.scss */
							#main {
							  color: #999;
							}
							/* line 10, ../sass/styles.scss */
							#main .content {
							  color: #bfbfbf;
							}
							

nested css option

In config.rb, if you do this: output_style = :nested

							#main {
							  color: #999;
							  .content {
							    color: #bfbfbf;
							  }
							}
							

would produce CSS like this:

							/* line 8, ../sass/styles.scss */
							#main {
							  color: #999; }
							  /* line 10, ../sass/styles.scss */
							  #main .content {
							    color: #bfbfbf; }
							

compact css option

In config.rb, if you do this: output_style = :compact

							#main {
							  color: #999;
							  .content {
							    color: #bfbfbf;
							  }
							}
							

would produce CSS like this:

							/* line 8, ../sass/styles.scss */
							#main { color: #999; }
							/* line 10, ../sass/styles.scss */
							#main .content { color: #bfbfbf; }
							

compressed css option

In config.rb, if you do this: output_style = :compressed

							#main {
							  color: #999;
							  .content {
							    color: #bfbfbf;
							  }
							}
							

would produce CSS like this:

							#main{color:#999}#main .content{color:#bfbfbf}
							

Slide Backgrounds

Set data-background="#007777" on a slide to change the full page background to the given color. All CSS color formats are supported.

Image Backgrounds

<section data-background="image.png">

Repeated Image Backgrounds

<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">

Fragmented Views

Hit the next arrow...

... to step through ...

Fragment Styles

There's a few styles of fragments, like:

grow

shrink

roll-in

fade-out

highlight-red

highlight-green

highlight-blue

current-visible

highlight-current-blue