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. 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
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
over again).
• These are not features; they’re nightmares!
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. History
• Syntactically Awesome Stylesheets
• First developed in 2007.
!
• Serves as:
• Scripting language.
• Preprocessor for CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
15. Function
• Sass compiles into CSS files.
!
• Two formatting conventions
• .SASS
• .SCSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
16. .SCSS
• SCSS follows conventions of CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
17. .SASS
• SASS focuses on indentation and shorthand.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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
24. Features
• Sass has 5 primary features.
• Variables
• Nesting
• Mixins
• Partials
• Inheritance
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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. Variables
• Pro-tip: Variables have scope based on
where they are defined.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
31. Mixins
It’s time to cook (up some mixins)!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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
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
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 nonpartial Sass file!
• Advanced users: see Sass Globbing.
• https://github.com/chriseppstein/sass-globbing
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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
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. 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. Using Compass
• Installing Compass is similar to installing
Sass.
• http://compass-style.org/install/
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
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