Sass - Getting Started with Sass!

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-speciﬁc preﬁxes 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 ﬁles.

!

• Two formatting conventions

• .SASS

• .SCSS


.SCSS
• SCSS follows conventions of CSS.


.SASS
• SASS focuses on indentation and shorthand.


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:

• conﬁg.rb

• sass/{sass ﬁles here}


conﬁg.rb


conﬁg.rb

Almost always auto-generated!


/sass/


Sassy Features

Features
• Sass has 5 primary features.

• Variables

• Nesting

• Mixins

• Partials

• Inheritance

Variables

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


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 deﬁned.


Nesting

Not the empty-nest variety.


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


Nesting


Mixins

It’s time to cook (up some 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


Partials

Spring cleaning for CSS.


Partials
• CSS Fact of Life:

• CSS ﬁles can get long (and unwieldy).

• Sass allows you to create partial ﬁles to
modularize and organize your code.


Visualizing Partials
_header.scss

_sidebar.scss

global.scss

global.css

_page.scss

Sass

CSS

_header.scss

_sidebar.scss

global.scss

global.css

_page.scss

Sass

_header.scss

CSS

inh

erit

s
compiles

inherits
_sidebar.scss

in

rits
he

global.scss

global.css

_page.scss

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


Step 1: Create Partial
• Create a _ﬁlename.scss in your SASS
folder.


Step 2: Reference Partial
• Reference the partial Sass ﬁle in your nonpartial Sass ﬁle!

• 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-andcompass


Thanks!

Sass - Getting Started with Sass!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Sass - Getting Started with Sass!

Similar to Sass - Getting Started with Sass! (20)

More from Eric Sembrat

More from Eric Sembrat (20)

Recently uploaded

Recently uploaded (20)

Sass - Getting Started with Sass!