Tools

Ruby and Bundler

Mac or Linux - Already installed

Windows - http://rubyinstaller.org

Linux - Use the package manager

My favorite - RVM (https://rvm.io)

Sass

CSS extention language

http://sass-lang.com

Compass

CSS authoring framework

• Sass mixins for common tasks
• Additional functionality like sprites
• Makes using CSS3 easier with mixins

http://compass-style.org/

Guard

An event listener (file watcher) and task runner - runs stuff with things have changed

• We'll use it to run compass when sass files change
• Can also be used for things like livereload and javascript processing

http://guardgem.org

GUI Tools

Scout - http://mhs.github.io/scout-app - Mac and Windows

Compass.app - http://compass.kkbox.com - Mac, Windows, and Linux

See the list at http://sass-lang.com/install

Installing Gems With Bundler

Bundler

Gemfile - Tells bundler what gems you want to use and which versions you need

source 'http://rubygems.org'

# Update compass so Sass 3.3 and Susy 2 can be used
gem "compass", ">= 1.0.0.alpha.19"

# Susy
gem "susy"
gem "breakpoint"

# Guard
gem "guard"
gem "guard-compass"
            

Run:

bundle install
              

Demo

Configuration

Compass

config.rb -> Tells compass where to find and put everything.

require "susy"
require "breakpoint"

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

output_style = :expanded
relative_assets = true
line_comments = true
              

Guard

Guardfile - Tells Guard what files to watch and what to do when they change

guard :compass do
  watch(%r{sass/.+\.scss$})
end
              

Run:

bundle exec guard
              

Drupal

.info file specifies css version of each sass file

Demo

Theming

Directory Structure

• sass -> Sass files and partials
• css -> Empty to start with

Organizing Sass Files

By page/site structure - header, footer, content, etc.

By Drupal bits - nodes, views, blocks, etc.

By site features - pages, blog, image gallery, etc.

Don't forget your content authors

Example File Structure

sass                                    css
├── _content.scss                       ├── style.css
├── _footer.scss                        └── wysiwyg.css
├── _forms.scss
├── _global_and_wysiwyg.scss
├── _global.scss
├── _header.scss
├── _layout.scss
├── _nav.scss
├── style.scss
├── _variables.scss
└── wysiwyg.scss
              

Demo

Mobile First With Susy

Setup

style.scss

// Library imports
@import "compass/reset";
@import "compass/css3";
@import "compass/typography";
@import "susy";
@import "breakpoint";

// Project specific imports
@import "variables";
@import "layout";
@import "global_and_wysiwyg";
@import "global";
@import "header";
@import "footer";
@import "nav";
@import "content";
@import "forms";

@include establish-baseline;
              

Setup

wysiwyg.scss

// Library imports
@import "compass/css3";
@import "compass/typography";
@import "breakpoint";

// Project imports
@import "variables";
@import "global_and_wysiwyg";
@import "content";

@include establish-baseline;
              

Setup

_variables.scss

// Vertical rhythm
$base-font-size: 16px;
$base-line-height: 24px;

// Screen sizes
$medium-width: min-width 45em;
$large-width: min-width 60em;

// Global susy settings
$susy: (
  gutters: 1/10
);
              

Demo

Alternatives

Sass

There isn't one (if you want to use Sass)

Less - http://lesscss.org

Compass

Burbon, Neat, and Bitters

• Collections of Sass mixins
• Does not include non-sass mixin functionality of Compass (e.g. sprites)
• Light weight - no need for Compass or Guard, just Sass

http://bourbon.io

Compass

Mixin replacement libraries (e.g. Burbon/Neat/Bitters)

Libraries/scripts used by build systems (e.g. guard, grunt, gulp)

Guard

Grunt - http://gruntjs.com

Gulp - http://gulpjs.com

Both are javascript/node applications

Each have extensive plugin libraries for all kinds of functionality

Larger Frameworks

Bootstrap - http://getbootstrap.com

Foundation - http://foundation.zurb.com