Intro to SASS

Syntactically Awesome Stylesheets

by Joanna Ho  |  j_lit@acs.org

Web Strategy and Operations UX

Sass is a CSS preprocessor, it is an extension of CSS3. It provides a simpler, more elegant way to write CSS and it has various features that are useful for creating manageable stylesheets.

Simply Put

Sass is a css preprocessor, it takes code written in preprocessed language and then compile that code into regular css. The file format for Sass is (.scss).

 

CSS Preprocessors

The 3 most popular css preprocessors are SASS, LESS, and Stylus

What's Wrong With Good-Old CSS?

  • It is not dynamic
  • It can be tedious to write out the same style over and over again. If you have a change, then you have to do a lot of find and replace
  • Tedious browser prefixes
  • Large messy css file
  • @import sucks (additional HTTP requests)

Why SASS Is Awesome

SASS is what CSS should be

Wouldn't it be nice if...

  • Set variables
  • Don't have to remember all those browser prefixes
  • Separate your CSS, so you can have a well organize, manageable css (only if you keep it organize that it)
  • Hidden notes only for you and your development team
  • @import with no performance cost

How It Works

4 big things that SASS gives you:

  1. Variables
  2. Nesting
  3. Mixins
  4. Organization

Variables

Nesting

Mixins

Organization

One more thing:

Selector Inheritance

Ready to try it?

Setup Time!

Install Ruby and Sass

 

 

 

 

If you’re using OS X, you’ll already have Ruby installed. Windows users can install Ruby via the Windows installer, and Linux users can install it via their package manager. Once you have Ruby installed, you can install Compass & Sass by running

// Windows
gem install compass

// linux / OS X
sudo gem install compass

What is Compass?

Compass is an open source css authoring framework that makes writing sass even easier. Compass provides a large collection of mixins that you can use apply to your project. It includes cross browser CSS3 mixins, common typography patterns, common styling patterns, and more.

compass-style.org

On your terminal (OS) or command line (windows), navigate to the Desktop or the directory you want to create your test project.

Now you have Compass and Sass installed!

compass create project

config.rb

// Watch your project directory for any sass changes 
compass watch 

// Compile sass once 
compass compile 

// Help document 
compass --help

Common Compass Commands

Building modular systems

— CSS Architecture:

 

 

 

 

 

 

 

Read up on SMACSS.com
(Scaleable and Modular Architecture for CSS)

  • Base (link, text, color) 
  • Layout (header, footer, body) 
  • Modules (modules/components) 
  • State Theme

A Good CSS Architecture

  • Predictable
  • Reusable
  • Maintainable
  • Scalable

Our Workflow

Demo - CQ5 CSS Framework

// Basic framework and grids

acs-bootstrap.css

 

// Customized styles

main.css

Submodules

You can get the pre-setup project with submodules here, make sure you have github setup.

 

  git clone --recursive https://github.com/joannalit/Sites.git new-project

THE END

SASS - http://sass-lang.com

Compass - http://compass-style.org

More on SASS - thesassway.com

CSS Architecture - smacss.com

 

 

Third party compilers:

Scout (Free) - http://mhs.github.com/scout-app

CodeKit ($32) - http://incident57.com/codekit

Made with Slides.com