The document discusses the CSS preprocessor Sass. It begins with an introduction to Sass and its features like variables, nesting, mixins and partials. It then covers using Sass with Drupal and tools for compiling Sass locally or on a server. The presentation concludes with a demo and suggestions for learning more about Sass.

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

2. 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

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. You can test out Sass
during this presentation!
http://sassmeister.com/
Eric Scott Sembrat | Georgia Institute of Technology | 2013

5. Knowing Your
Audience
Eric Scott Sembrat | Georgia Institute of Technology | 2013

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

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

8. State of CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013

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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
over again).
•These are not features; they’re nightmares!

10. Eric Scott Sembrat | Georgia Institute of Technology | 2013

11. Eric Scott Sembrat | Georgia Institute of Technology | 2013

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. Intro to Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013

14. Eric Scott Sembrat | Georgia Institute of Technology | 2013
History
•Syntactically Awesome Stylesheets
•First developed in 2007.
!
•Serves as:
•Scripting language.
•Preprocessor for CSS.

15. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Function
•Sass compiles into CSS files.
!
•Two formatting conventions
•.SASS
•.SCSS

16. Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SCSS
•SCSS follows conventions of CSS.

17. Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SASS
•SASS focuses on indentation and short-hand.

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

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. Eric Scott Sembrat | Georgia Institute of Technology | 2013
config.rb

21. Eric Scott Sembrat | Georgia Institute of Technology | 2013
config.rb
Almost always auto-generated!

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

23. Sassy Features
Eric Scott Sembrat | Georgia Institute of Technology | 2013

24. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Features
•Sass has 5 primary features.
•Variables
•Nesting
•Mixins
•Partials
•Inheritance

25. Let’s time-travel back to Computer Science 1101.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables

26. 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, strings of text,
colors, numbers, boolean values, or
even value lists.
•No more memorizing hex values!

27. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables
•Pro-tip: Variables have scope based on
where they are defined.

28. Not the empty-nest variety.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Nesting

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

30. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Nesting

31. It’s time to cook (up some mixins)!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Mixins

32. 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 reference mixins as well.

33. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Mixins

34. Spring cleaning for CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Partials

35. 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
modularize and organize your code.

36. Visualizing Partials
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
global.scss global.css

37. Visualizing Partials
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
global.scss global.css

38. Visualizing Partials
Sass CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
global.scss global.css

39. Visualizing Partials
Sass CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
inherits compiles
global.scss global.css
inherits
inherits

40. Creating Partials
•Creating partials can be done in two steps.
Eric Scott Sembrat | Georgia Institute of Technology | 2013

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

42. Step 2: Reference Partial
•Reference the partial Sass file in your non-partial
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Sass file!
• Advanced users: see Sass Globbing.
• https://github.com/chriseppstein/sass-globbing

43. Inheritance
Copy and paste no more, theme developers! Inheritance is
here!
Eric Scott Sembrat | Georgia Institute of Technology | 2013

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

45. Inheritance
Eric Scott Sembrat | Georgia Institute of Technology | 2013

46. More Features
Eric Scott Sembrat | Georgia Institute of Technology | 2013

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. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Compass
•Compass is a Sass framework extension
focused on CSS3 and layouts.
•http://compass-style.org/reference/
compass/
•Essentially, a big set of mixins.

49. Using Compass
•Installing Compass is similar to installing
Sass.
•http://compass-style.org/install/
Eric Scott Sembrat | Georgia Institute of Technology | 2013

50. Using Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013

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. 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. 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. 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. 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. 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. Demo? Demo!
Eric Scott Sembrat | Georgia Institute of Technology | 2013

58. Want to Learn
More?
Eric Scott Sembrat | Georgia Institute of Technology | 2013

59. More Information
• http://sass-lang.com/guide
• http://compass-style.org/reference/compass/
• http://thesassway.com/beginner/getting-started-with-sass-and-compass
Eric Scott Sembrat | Georgia Institute of Technology | 2013

60. Thanks!
Eric Scott Sembrat | Georgia Institute of Technology | 2013