Sass 101Cleaning up your CSS Closet (once & for all)!

Eric Sembrat - DrupalCamp Chattanooga - September 2014

Who Am I?A quick introduction!

• Web Manager for the College of Engineering at Georgia Tech

• Ph.D. Student in Instructional Technology at Georgia State University !

• Website: http://ericsembrat.com• Twitter: @esembrat• Hashtag: #Sassnooga

Eric Sembrat

• State of CSS• What is Sass?• How to Use Sass• Demo• Questions / Comments

Our Roadmap

The State of CSSTime to get serious about how we theme our themes

We’ve come a long way…

We’ve come a long way…

• Before CSS, there were inline element styles.!

• Then CSS was born with style.!

• Finally, CSS grew too big to live with HTML.

CSS Growing Up<font color=“green” size=“8” family=“Wingdings”>

<font style=“color: green; font-size: 8pt; font-family: Wingdings”>

@import url(fancy-pants-css.css);

CSS Has Not Aged Well..Variables

CSS3

Inheritance

Reusability

Clutter

Media Queries

Theme Templates

• CSS4 looks to fix some of these issues (1)

• Parent Selectors• Grids

Some of this will change..

• However, there’s still one big elephant in the room.

Don’t Repeat Yourself (DRY)

The programming mantra of “Don’t Repeat Yourself”

• Minimizing repeating the same declaration over and over again

• Modifications only happen in one place

!

• Modeled around the construction of repetitive, reusable, and scalable elements

What is DRY?

• CSS is too lazy to learn to DRY

• Variables like color, font• Media queries• Chunks of CSS

DRY in CSS

• So, how do we fix this mess we are in?

Sass to the Rescue!

What is Sass?How Sass cleans out the CSS closet, once and for all!

• Sass is a preprocessor for CSS• Converts Sass short-code into clunky, ugly CSS• Serves as a translator

Preprocessor

CSS

compiles

to

SASS

• Sass uses a very CSS-like syntax (.SCSS) to extend new features into the syntax you already know!

• An alternative is a tab-centric syntax (.SASS)

Sass

Compare

http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

#main { color: blue; font-size: 0.3em; }

#main! color: blue font-size: 0.3em

• Our CSS-friendly .SCSS formatting option.

• Or, the tab-centric .SASS formatting option.

.SCSS vs. .SASS• Changing syntax is an automated process:

• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax

Using SassHow Sass cleans out the CSS closet, once and for all!

• SassMeister• http://sassmeister.com/

0) Test Sass All Day

• Easiest way to get started is to download a Sass application.

• http://sass-lang.com/install• Multi-platform releases• Free and paid products available

1) Get a App

Scout

Scout - http://mhs.github.io/scout-app/

CodeKit

CodeKit - https://incident57.com/codekit/

• Learn many of the essential features of Sass.

• Variables• Nesting• Mixins• Plugins• Partials• (and more!)

2) Learn the Syntax

Variables

$pretty-blue: #0000FF; $pretty-font-size: 0.3em; !#main { color: $pretty-blue; font-size: $pretty-font-size; }

#main { color: #0000FF; font-size: 0.3em; }

Nesting$pretty-blue: #0000FF; !#main { color: $pretty-blue; font-size: 0.3em; #slideshow { background-color: mix(#FFF, $pretty- blue, 20%); } }

#main { color: #0000FF; font-size: 0.3em; } !#main #slideshow { background-color: #3333ff; }

Mixins

@mixin chattanooga() { background-color: pink; font-size: 25pt; } !#body #chattanooga { @include chattanooga(); }

#body #chattanooga { background-color: pink; font-size: 25pt; }

Mixins

@mixin chattanooga() { background-color: pink; font-size: 25pt; } !#body #chattanooga { @include chattanooga(); }

#body #chattanooga { background-color: pink; font-size: 25pt; }

Mixins can reference mixins!

Mixins

@mixin chattanooga() { background-color: pink; font-size: 25pt; } !#body #chattanooga { @include chattanooga(); }

#body #chattanooga { background-color: pink; font-size: 25pt; }

Mixins can take arguments (with default values)!

Plugins• Compass

• http://compass-style.org/

• Sass Globbing• https://github.com/chriseppstein/sass-globbing

• Breakpoint • http://breakpoint-sass.com/

• Bourbon • http://bourbon.io/

Partials

compiles

to

_hdr.scss

_ftr.scss

global.scss global.css

• Sass uses a configuration file (config.rb) to control CSS output

• Requires Compass• http://compass-style.org/help/documentation/configuration-

reference/

Configure CSS Output

DemoQuick highlights and features!

Let’s ChatQuestions, Comments, Concerns, Discussions about Sass