Bringing sassy to CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Theming with Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
About MeEric Scott Sembrat • Web Developer at Georgia
Institute of Technology• Graduate Student at Georgia
State University• Lives in Atlanta, Georgia!
Twitter: @esembratWebsite: ericsembrat.com
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Game Plan
•Knowing Your Audience•The State of CSS•Introduction to Sass•Features of Sass•Advanced Features•Using Sass•A short and lovely demo
You can test out Sass during this presentation!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
http://sassmeister.com/
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Knowing Your Audience
The preprocessor, not the attitude.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Who has heard of Sass?
It’s super effective!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Who has used Sass?
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.•Copying and pasting a style (over and over again).
•These are not features; they’re nightmares!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Intro to Sass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
History
•Syntactically Awesome Stylesheets•First developed in 2007.
!
•Serves as:•Scripting language.•Preprocessor for CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Function
•Sass compiles into CSS files. !
•Two formatting conventions•.SASS•.SCSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SCSS
•SCSS follows conventions of CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SASS
•SASS focuses on indentation and short-hand.
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 Technology | 2013
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
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
Let’s time-travel back to Computer Science 1101.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables
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!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables
•Pro-tip: Variables have scope based on where they are defined.
Not the empty-nest variety.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Nesting
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 Technology | 2013
Nesting
It’s time to cook (up some mixins)!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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 reference mixins as well.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Mixins
Spring cleaning for CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Partials
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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Visualizing Partials
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Visualizing Partials
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Visualizing Partials
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
Sass CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Visualizing Partials
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
Sass CSS
compilesinherits
inherits
inherits
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Creating Partials
•Creating partials can be done in two steps.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Step 1: Create Partial
•Create a _filename.scss in your SASS folder.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Step 2: Reference Partial
•Reference the partial Sass file in your non-partial Sass file!
• Advanced users: see Sass Globbing.• https://github.com/chriseppstein/sass-globbing
Copy and paste no more, theme developers! Inheritance is here!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Inheritance
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Inheritance
•Inheritance imports syntax and style from another section of your SASS project.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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-specific prefixes
!
•However, there is a mixin collection that fixes this.•Compass
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.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Using Compass
•Installing Compass is similar to installing Sass.•http://compass-style.org/install/
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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•Compiling Sass locally
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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
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
Local: GUIs
•Quite a few GUIs available:•http://sass-lang.com/install•See: Compass.app & Scout
Eric Scott Sembrat | Georgia Institute of Technology | 2013
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
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
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/beginner/getting-started-with-sass-and-
compass
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Thanks!