This document introduces Sass, a preprocessor for CSS that allows for variables, nesting, mixins and more to make CSS more powerful, modular, and maintainable. It discusses how CSS has grown complex without features like variables, discusses the "Don't Repeat Yourself" principle in programming, and then outlines several key features of Sass like variables, nesting, mixins and plugins that help address these issues and clean up CSS. The document provides examples of how these Sass features work and concludes with information on getting started with Sass.

1. Sass 101 Cleaning up your CSS Closet (once & for all)!
Eric Sembrat - DrupalCamp Chattanooga - September 2014

2. Who Am I?
A quick introduction!

3. Eric Sembrat
• 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

4. Our Roadmap
• State of CSS
• What is Sass?
• How to Use Sass
• Demo
• Questions / Comments

5. The State of CSS
Time to get serious about how we theme our themes

6. We’ve come a long way…

7. We’ve come a long way…

8. CSS Growing Up
• Before CSS, there were
inline element styles.
!
• Then CSS was born
with style.
!
• Finally, CSS grew too
big to live with HTML.
<font color=“green” size=“8” family=“Wingdings”>
<font style=“color: green; font-size: 8pt; font-family:
Wingdings”>
@import url(fancy-pants-css.css);

9. CSS Has Not Aged Well..
Variables
CSS3
Inheritance
Reusability
Clutter
Media Queries
Theme Templates

10. Some of this will change..
• CSS4 looks to fix some of
these issues (1)
• Parent Selectors
• Grids
• However, there’s still one big elephant in the room.

11. Don’t Repeat Yourself (DRY)
The programming mantra of “Don’t Repeat Yourself”

12. What is DRY?
• 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

13. DRY in CSS
• CSS is too lazy to learn
to DRY
• Variables like color, font
• Media queries
• Chunks of CSS
• So, how do we fix this mess we are in?

14. Sass to the Rescue!

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

16. Preprocessor
• Sass is a preprocessor for CSS
• Converts Sass short-code into clunky, ugly CSS
• Serves as a translator
CSS
compiles
to
SASS

17. 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)

18. Compare
#main {
color: blue;
font-size: 0.3em;
• Our CSS-friendly .SCSS
formatting option.
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
}
#main!
color: blue
font-size: 0.3em
• Or, the tab-centric .SASS
formatting option.

19. .SCSS vs. .SASS
• Changing syntax is an automated process:
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax

20. Using Sass
How Sass cleans out the CSS closet, once and for all!

21. 0) Test Sass All Day
• SassMeister
• http://sassmeister.com/

22. 1) Get a App
• Easiest way to get started is to download a Sass
application.
• http://sass-lang.com/install
• Multi-platform releases
• Free and paid products available

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

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

25. 2) Learn the Syntax
• Learn many of the essential
features of Sass.
• Variables
• Nesting
• Mixins
• Plugins
• Partials
• (and more!)

26. 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;
}

27. 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;
}

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

29. Mixins
@mixin chattanooga() {
background-color: pink;
font-size: 25pt;
Mixins can reference mixins!
}
!
#body #chattanooga {
@include chattanooga();
}
#body #chattanooga {
background-color: pink;
font-size: 25pt;
}

30. Mixins
@mixin chattanooga() {
background-color: pink;
font-size: 25pt;
Mixins can take arguments (with
}
!
#body #chattanooga {
default values)!
@include chattanooga();
}
#body #chattanooga {
background-color: pink;
font-size: 25pt;
}

31. Plugins
• Compass
• http://compass-style.org/
• Sass Globbing
• https://github.com/chriseppstein/sass-globbing
• Breakpoint
• http://breakpoint-sass.com/
• Bourbon
• http://bourbon.io/

32. Partials
compiles
global.scss global.css
to
_hdr.scss
_ftr.scss

33. Configure CSS Output
• Sass uses a configuration file (config.rb) to control
CSS output
• Requires Compass
• http://compass-style.org/help/documentation/configuration-reference/

34. Demo
Quick highlights and features!

35. Let’s Chat
Questions, Comments, Concerns, Discussions about Sass