Sass - Tutorial

Bringing sassy to CSS.

Eric Scott Sembrat | Georgia Institute of Technology | 2013

Theming with Sass


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


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!


http://sassmeister.com/


Knowing Your Audience

The preprocessor, not the attitude.


Who has heard of Sass?

It’s super effective!


Who has used Sass?


State of CSS


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!


Fixing CSS

•What if you could give CSS a makeover?•Make it intelligent.•Make it scalable.•Make it re-usable.


Intro to Sass


History

•Syntactically Awesome Stylesheets•First developed in 2007.

!

•Serves as:•Scripting language.•Preprocessor for CSS.


Function

•Sass compiles into CSS files. !

•Two formatting conventions•.SASS•.SCSS


.SCSS

•SCSS follows conventions of CSS.


.SASS

•SASS focuses on indentation and short-hand.


Hard to Choose?

•Sass can convert between SASS and SCSS with relative ease.


Sassy Components

•A Sass project (such as a Drupal theme) only needs two key components:•config.rb•sass/{sass files here}


config.rb


config.rb

Almost always auto-generated!


/sass/


Sassy Features


Features

•Sass has 5 primary features.•Variables•Nesting•Mixins•Partials•Inheritance

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


Variables


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!


Variables

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

Not the empty-nest variety.


Nesting


Nesting

•Nested rules allow you to break up endlessly long selectors of CSS.


Nesting

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


Mixins


Mixins

•Mixins allow you to chunk up CSS declarations to be reusable with one reference.

•Pro-tip: Mixins can reference mixins as well.


Mixins

Spring cleaning for CSS.


Partials


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.


Visualizing Partials

_header.scss

_sidebar.scss

_page.scss

global.scss global.css



_header.scss

_sidebar.scss

_page.scss


Sass CSS



_header.scss

_sidebar.scss

_page.scss


Sass CSS

compilesinherits

inherits

inherits


Creating Partials

•Creating partials can be done in two steps.


Step 1: Create Partial

•Create a _filename.scss in your SASS folder.


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!


Inheritance


Inheritance

•Inheritance imports syntax and style from another section of your SASS project.


Inheritance


More Features


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


Compass

•Compass is a Sass framework extension focused on CSS3 and layouts.•http://compass-style.org/reference/compass/•Essentially, a big set of mixins.


Using Compass

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


Using Sass


When to Compile Sass

•There are two methods of using Sass on a Drupal website.•Letting Drupal Compile Sass•Compiling Sass locally


Compiling Server Side

•There’s a Drupal module for that!•https://drupal.org/project/sass

•Consider memory load, revisioning, etc.


Compiling Locally

•Most local compilers for Sass require Ruby to be installed.•Two main ways of compiling locally:

•Command Line•GUIs


Local: GUIs

•Quite a few GUIs available:•http://sass-lang.com/install•See: Compass.app & Scout


Local: Command Line

•Installing locally is dependent on your OS. •http://sass-lang.com/install

•Requires Ruby to be installed.


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/


Demo? Demo!


Want to Learn More?


More Information

• http://sass-lang.com/guide• http://compass-style.org/reference/compass/• http://thesassway.com/beginner/getting-started-with-sass-and-

compass


Thanks!

Sass - Tutorial

Internet

Transcript of Sass - Tutorial