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 Univer...
Game Plan
• Knowing Your Audience

• The State of CSS

• Introduction to Sass

• Features of Sass

• Advanced Features

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

Eric Scott Sembrat | Georgia Institute of Technol...
Knowing Your
Audience
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Who has heard of Sass?
The preprocessor, not the attitude.

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Who has used Sass?
It’s super effective!

Eric Scott Sembrat | Georgia Institute of Technology | 2013
State of CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Frustrations with CSS
• CSS has not aged well.

• Vendor-specific prefixes in CSS3.

• Replacing a color value in a project....
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Fixing CSS
• What if you could give CSS a makeover?

• Make it intelligent.

• Make it scalable.

• Make it re-usable.

Er...
Intro to Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
History
• Syntactically Awesome Stylesheets

• First developed in 2007.

!

• Serves as:

• Scripting language.

• Preproc...
Function
• Sass compiles into CSS files. 

!

• Two formatting conventions

• .SASS

• .SCSS

Eric Scott Sembrat | Georgia ...
.SCSS
• SCSS follows conventions of CSS.

Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SASS
• SASS focuses on indentation and shorthand.

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Hard to Choose?
• Sass can convert between SASS and
SCSS with relative ease.

Eric Scott Sembrat | Georgia Institute of Te...
Sassy Components
• A Sass project (such as a Drupal theme)
only needs two key components:

• config.rb

• sass/{sass files h...
config.rb

Eric Scott Sembrat | Georgia Institute of Technology | 2013
config.rb

Almost always auto-generated!

Eric Scott Sembrat | Georgia Institute of Technology | 2013
/sass/

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Sassy Features
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Features
• Sass has 5 primary features.

• Variables

• Nesting

• Mixins

• Partials

• Inheritance
Eric Scott Sembrat | ...
Variables

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

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables
• Variables allow you to assign a value to an
easy-to-remember placeholder name.

• Works with hex values, strin...
Variables

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

Eric Scott Sembrat | Georgia Institute of Tech...
Nesting

Not the empty-nest variety.

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Nesting
• Nested rules allow you to break up
endlessly long selectors of CSS.

Eric Scott Sembrat | Georgia Institute of T...
Nesting

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Mixins

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

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Mixins
• Mixins allow you to chunk up CSS

declarations to be reusable with one
reference.

• Pro-tip: Mixins can referenc...
Mixins

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Partials

Spring cleaning for CSS.

Eric Scott Sembrat | Georgia Institute of Technology | 2013
Partials
• CSS Fact of Life:

• CSS files can get long (and unwieldy).

• Sass allows you to create partial files to
modular...
Visualizing Partials
_header.scss

_sidebar.scss

global.scss

global.css

_page.scss
Eric Scott Sembrat | Georgia Institu...
Visualizing Partials
_header.scss

_sidebar.scss

global.scss

global.css

_page.scss
Eric Scott Sembrat | Georgia Institu...
Visualizing Partials
Sass

CSS

_header.scss

_sidebar.scss

global.scss

global.css

_page.scss
Eric Scott Sembrat | Geor...
Visualizing Partials
Sass

_header.scss

CSS

inh

erit

s
compiles

inherits
_sidebar.scss

in

rits
he

global.scss

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

Eric Scott Sembrat | Georgia Institute of Technology | 20...
Step 1: Create Partial
• Create a _filename.scss in your SASS
folder.

Eric Scott Sembrat | Georgia Institute of Technology...
Step 2: Reference Partial
• Reference the partial Sass file in your nonpartial Sass file!

• Advanced users: see Sass Globbi...
Inheritance

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

Eric Scott Sembrat | Georgia Institute of Tec...
Inheritance
• Inheritance imports syntax and style from
another section of your SASS project.

Eric Scott Sembrat | Georgi...
Inheritance

Eric Scott Sembrat | Georgia Institute of Technology | 2013
More Features
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Vendor Prefix Woes
• While Sass has tons of features out of the
box, it is missing one key component:

• CSS3 vendor-specifi...
Compass
• Compass is a Sass framework extension
focused on CSS3 and layouts.

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

• http://compass-style.org/install/

Eric Scott Sembrat...
Using Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
When to Compile Sass
• There are two methods of using Sass on a
Drupal website.

• Letting Drupal Compile Sass

• Compilin...
Compiling Server Side
• There’s a Drupal module for that!

• https://drupal.org/project/sass

• Consider memory load, revi...
Compiling Locally
• Most local compilers for Sass require Ruby
to be installed.

• Two main ways of compiling locally:

• ...
Local: GUIs
• Quite a few GUIs available:

• http://sass-lang.com/install

• See: Compass.app & Scout

Eric Scott Sembrat ...
Local: Command Line
• Installing locally is dependent on your OS. 

• http://sass-lang.com/install

• Requires Ruby to be ...
My Preference?
• Personally, I’m in love with Compass.app.

• http://compass.kkbox.com/

• Scout is a very good “getting s...
Demo? Demo!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Want to Learn
More?
Eric Scott Sembrat | Georgia Institute of Technology | 2013
More Information
• http://sass-lang.com/guide

• http://compass-style.org/reference/compass/

• http://thesassway.com/begi...
Thanks!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Upcoming SlideShare
Loading in...5
×

Sass - Getting Started with Sass!

1,888

Published on

A presentation for DrupalCamp Chattanooga 2013 on getting started with the Sass CSS framework!

Published in: Technology, Education

Sass - Getting Started with Sass!

  1. 1. Theming with Sass Bringing sassy to CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  2. 2. 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 Eric Scott Sembrat | Georgia Institute of Technology | 2013
  3. 3. Game Plan • Knowing Your Audience • The State of CSS • Introduction to Sass • Features of Sass • Advanced Features • Using Sass • A short and lovely demo Eric Scott Sembrat | Georgia Institute of Technology | 2013
  4. 4. You can test out Sass during this presentation! http://sassmeister.com/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  5. 5. Knowing Your Audience Eric Scott Sembrat | Georgia Institute of Technology | 2013
  6. 6. Who has heard of Sass? The preprocessor, not the attitude. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  7. 7. Who has used Sass? It’s super effective! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  8. 8. State of CSS Eric Scott Sembrat | Georgia Institute of Technology | 2013
  9. 9. 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! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  10. 10. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  11. 11. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  12. 12. Fixing CSS • What if you could give CSS a makeover? • Make it intelligent. • Make it scalable. • Make it re-usable. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  13. 13. Intro to Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  14. 14. History • Syntactically Awesome Stylesheets • First developed in 2007. ! • Serves as: • Scripting language. • Preprocessor for CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  15. 15. Function • Sass compiles into CSS files. ! • Two formatting conventions • .SASS • .SCSS Eric Scott Sembrat | Georgia Institute of Technology | 2013
  16. 16. .SCSS • SCSS follows conventions of CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  17. 17. .SASS • SASS focuses on indentation and shorthand. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  18. 18. Hard to Choose? • Sass can convert between SASS and SCSS with relative ease. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  19. 19. Sassy Components • A Sass project (such as a Drupal theme) only needs two key components: • config.rb • sass/{sass files here} Eric Scott Sembrat | Georgia Institute of Technology | 2013
  20. 20. config.rb Eric Scott Sembrat | Georgia Institute of Technology | 2013
  21. 21. config.rb Almost always auto-generated! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  22. 22. /sass/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  23. 23. Sassy Features Eric Scott Sembrat | Georgia Institute of Technology | 2013
  24. 24. Features • Sass has 5 primary features. • Variables • Nesting • Mixins • Partials • Inheritance Eric Scott Sembrat | Georgia Institute of Technology | 2013
  25. 25. Variables Let’s time-travel back to Computer Science 1101. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  26. 26. 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! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  27. 27. Variables • Pro-tip: Variables have scope based on where they are defined. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  28. 28. Nesting Not the empty-nest variety. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  29. 29. Nesting • Nested rules allow you to break up endlessly long selectors of CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  30. 30. Nesting Eric Scott Sembrat | Georgia Institute of Technology | 2013
  31. 31. Mixins It’s time to cook (up some mixins)! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  32. 32. Mixins • Mixins allow you to chunk up CSS declarations to be reusable with one reference. • Pro-tip: Mixins can reference mixins as well. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  33. 33. Mixins Eric Scott Sembrat | Georgia Institute of Technology | 2013
  34. 34. Partials Spring cleaning for CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  35. 35. 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. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  36. 36. Visualizing Partials _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  37. 37. Visualizing Partials _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  38. 38. Visualizing Partials Sass CSS _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  39. 39. Visualizing Partials Sass _header.scss CSS inh erit s compiles inherits _sidebar.scss in rits he global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  40. 40. Creating Partials • Creating partials can be done in two steps. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  41. 41. Step 1: Create Partial • Create a _filename.scss in your SASS folder. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  42. 42. Step 2: Reference Partial • Reference the partial Sass file in your nonpartial Sass file! • Advanced users: see Sass Globbing. • https://github.com/chriseppstein/sass-globbing Eric Scott Sembrat | Georgia Institute of Technology | 2013
  43. 43. Inheritance Copy and paste no more, theme developers! Inheritance is here! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  44. 44. Inheritance • Inheritance imports syntax and style from another section of your SASS project. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  45. 45. Inheritance Eric Scott Sembrat | Georgia Institute of Technology | 2013
  46. 46. More Features Eric Scott Sembrat | Georgia Institute of Technology | 2013
  47. 47. 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 Eric Scott Sembrat | Georgia Institute of Technology | 2013
  48. 48. Compass • Compass is a Sass framework extension focused on CSS3 and layouts. • http://compass-style.org/reference/ compass/ • Essentially, a big set of mixins. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  49. 49. Using Compass • Installing Compass is similar to installing Sass. • http://compass-style.org/install/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  50. 50. Using Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  51. 51. When to Compile Sass • There are two methods of using Sass on a Drupal website. • Letting Drupal Compile Sass • Compiling Sass locally Eric Scott Sembrat | Georgia Institute of Technology | 2013
  52. 52. Compiling Server Side • There’s a Drupal module for that! • https://drupal.org/project/sass • Consider memory load, revisioning, etc. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  53. 53. Compiling Locally • Most local compilers for Sass require Ruby to be installed. • Two main ways of compiling locally: • Command Line • GUIs Eric Scott Sembrat | Georgia Institute of Technology | 2013
  54. 54. Local: GUIs • Quite a few GUIs available: • http://sass-lang.com/install • See: Compass.app & Scout Eric Scott Sembrat | Georgia Institute of Technology | 2013
  55. 55. Local: Command Line • Installing locally is dependent on your OS. • http://sass-lang.com/install • Requires Ruby to be installed. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  56. 56. 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/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  57. 57. Demo? Demo! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  58. 58. Want to Learn More? Eric Scott Sembrat | Georgia Institute of Technology | 2013
  59. 59. More Information • http://sass-lang.com/guide • http://compass-style.org/reference/compass/ • http://thesassway.com/beginner/getting-started-with-sass-andcompass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  60. 60. Thanks! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×