Learn the basics of Sass and Compass

During my time studying Ruby on Rails at Code Fellows, we had to do a lightning talk on a topic of our choice. Since Rails utilizes Sass, and my CSS skills have always been more of a learn-on-demand thing rather than a deep dive, I decided to check Sass out. While doing so, Compass came up often, so I added a little bit of it to my presentation.

Below is a link to my slides, plus notes and links so that you can play around with Sass. It’s pretty easy to digest, but there’s a lot of depth that I didn’t cover and need to continue learning myself. Enjoy!

Slides

Get my slides via SlideShare.

Compass and Sass Examples

Try it out by installing Compass, cloning the repo, and then opening the application.css.scss file.

gem install compass
git clone git@github.com:bbshih/sass_presentation.git
cd sass_presentation
rake db:migrate db:test:prepare
subl /app/assets/stylesheets/application.css.scss
Start a rails server and load localhost:3000 in the browser.

SASS = Syntactically Awesome Style Sheets

TL;DR Sass is an extension of CSS3 that adds on features that programming languages have but CSS lacks. These features make it easier to write and manage CSS.

Sass Filetypes

Sass has two acceptable syntaxes with two different file types:

  • Indented syntax(.sass) – Similar to Haml
  • SCSS(.scss) – Uses CSS semantics, so CSS is valid SCSS (I’ll be using this in the demo)

Sass has an interpreter that spits out traditional CSS files from the *.scss files that you create. You can set a command to monitor whenever you make changes to your .scss file so that you always have the .css file, but with Rails and the Sass gem, it will always automatically generate a .css file for you when you reload the page.

Compass

Compass is an open-source CSS framework. It utilizes Sass to provide mixins that solve common problems encountered when creating CSS files.

How to Install

Add to your Gemfile:

group :assets do
  gem 'sass-rails' # if running rails 3.1 or greater
  gem 'compass-rails'
end

In your project directory, run:

$ bundle
$ bundle exec compass init

Rename your application.css to application.css.scss to change it into a Sass file. Then add the import below to the file:

@import "compass"

Create new .scss files and @import them into the application.css.scss to use them.

Once you’re ready to push for production use:

rake assets:precompile

Features of Sass

Variables

  • Create a variable by using $name and assign value with a $highlight: #ff0000;
  • Supports four data types: numbers (and units), strings, colors and booleans

Nesting

  • Place child styles within a parent for better organization and readability

Mixins

  • A selection of code that contains any valid Sass code. Whenever the mixin is called, it is inserted into the location.
  • Define by using @mixin nameOfMixIn {} and then calling @include nameOfMixIn
  • You can give a mixin an argument to customize the mixin code:

#mixin highlightBox($border_width) {
     border-width: $border_width
     color: blue;
 }

 .box {
     @include highlightBox(3px)
     height: 30px;
 }

Selector inheritance

  • Use CSS of another selector by using @extend selectorName

Check out the original post and more resources on Billy’s blog.

Next PostPrevious Post

About the Author