Sass - Tutorial

Theming with Sass
Bringing sassy to CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

About Me
Eric Scott Sembrat
• Web Developer at Georgia
Institute of Technology
• Graduate Student at Georgia
State University
• Lives in Atlanta, Georgia
!
Twitter: @esembrat
Website: ericsembrat.com

Game Plan
•Knowing Your Audience
•The State of CSS
•Introduction to Sass
•Features of Sass
•Advanced Features
•Using Sass
•A short and lovely demo

You can test out Sass
during this presentation!
http://sassmeister.com/

Knowing Your
Audience

Who has heard of Sass?
The preprocessor, not the attitude.

Who has used Sass?
It’s super effective!

State of CSS

Frustrations with CSS
•CSS has not aged well.
•Vendor-specific prefixes in CSS3.
•Replacing a color value in a project.
•Copying and pasting a style (over and
over again).
•These are not features; they’re nightmares!

Fixing CSS
•What if you could give CSS a makeover?
•Make it intelligent.
•Make it scalable.
•Make it re-usable.

Intro to Sass

History
•Syntactically Awesome Stylesheets
•First developed in 2007.
!
•Serves as:
•Scripting language.
•Preprocessor for CSS.

Function
•Sass compiles into CSS files.
!
•Two formatting conventions
•.SASS
•.SCSS

.SCSS
•SCSS follows conventions of CSS.

.SASS
•SASS focuses on indentation and short-hand.

Hard to Choose?
•Sass can convert between SASS and
SCSS with relative ease.

Sassy Components
•A Sass project (such as a Drupal theme)
only needs two key components:
•config.rb
•sass/{sass files here}

config.rb

config.rb
Almost always auto-generated!

/sass/

Sassy Features

Features
•Sass has 5 primary features.
•Variables
•Nesting
•Mixins
•Partials
•Inheritance

Let’s time-travel back to Computer Science 1101.
Variables

Variables
•Variables allow you to assign a value to an
easy-to-remember placeholder name.
•Works with hex values, strings of text,
colors, numbers, boolean values, or
even value lists.
•No more memorizing hex values!

Variables
•Pro-tip: Variables have scope based on
where they are defined.

Not the empty-nest variety.
Nesting

Nesting
•Nested rules allow you to break up
endlessly long selectors of CSS.

Nesting

It’s time to cook (up some mixins)!
Mixins

Mixins
•Mixins allow you to chunk up CSS
declarations to be reusable with one
reference.
•Pro-tip: Mixins can reference mixins as well.

Mixins

Spring cleaning for CSS.
Partials

Partials
•CSS Fact of Life:
•CSS files can get long (and unwieldy).
•Sass allows you to create partial files to
modularize and organize your code.

Visualizing Partials
_header.scss
_sidebar.scss
_page.scss
global.scss global.css

Sass CSS
_header.scss
_sidebar.scss
_page.scss

Sass CSS
_header.scss
_sidebar.scss
_page.scss
inherits compiles
inherits
inherits

Creating Partials
•Creating partials can be done in two steps.

Step 1: Create Partial
•Create a _filename.scss in your SASS
folder.

Step 2: Reference Partial
•Reference the partial Sass file in your non-partial
Sass file!
• Advanced users: see Sass Globbing.
• https://github.com/chriseppstein/sass-globbing

Inheritance
Copy and paste no more, theme developers! Inheritance is
here!

Inheritance
•Inheritance imports syntax and style from
another section of your SASS project.

Inheritance

More Features

Vendor Prefix Woes
•While Sass has tons of features out of the
box, it is missing one key component:
•CSS3 vendor-specific prefixes
!
•However, there is a mixin collection that
fixes this.
•Compass

Compass
•Compass is a Sass framework extension
focused on CSS3 and layouts.
•http://compass-style.org/reference/
compass/
•Essentially, a big set of mixins.

Using Compass
•Installing Compass is similar to installing
Sass.
•http://compass-style.org/install/

Using Sass

When to Compile Sass
•There are two methods of using Sass on a
Drupal website.
•Letting Drupal Compile Sass
•Compiling Sass locally

Compiling Server Side
•There’s a Drupal module for that!
•https://drupal.org/project/sass
•Consider memory load, revisioning, etc.

Compiling Locally
•Most local compilers for Sass require Ruby
to be installed.
•Two main ways of compiling locally:
•Command Line
•GUIs

Local: GUIs
•Quite a few GUIs available:
•http://sass-lang.com/install
•See: Compass.app & Scout

Local: Command Line
•Installing locally is dependent on your OS.
•http://sass-lang.com/install
•Requires Ruby to be installed.

My Preference?
•Personally, I’m in love with Compass.app.
•http://compass.kkbox.com/
•Scout is a very good “getting started” app.
•http://mhs.github.io/scout-app/

Demo? Demo!

Want to Learn
More?

More Information
• http://sass-lang.com/guide
• http://compass-style.org/reference/compass/
• http://thesassway.com/beginner/getting-started-with-sass-and-compass

Thanks!

Sass - Tutorial

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to Sass - Tutorial

Similar to Sass - Tutorial (20)

More from Danilo Sousa

More from Danilo Sousa (11)

Recently uploaded

Recently uploaded (20)

Sass - Tutorial