Jason Bell

I build pieces of the web at Start Interaction.

I am various permutations of myself on…

Twitter—@j_bell
App.net—@jasonbell
Drupal.org—jason.bell

I help organize Fox Valley Drupal.

Sass

Sass is a preprocessor for CSS that will help you fall in love with CSS all over again.
Sass is written in Ruby and distributed via RubyGems.
There are 2 syntaxes. Both work.
- .sass = old
- .scss = new, more common, just use it

Installing Sass

It's slightly different by platform, but essentially boils down to the following command:

gem install sass

Create a Sass project

Every valid CSS3 stylesheet is valid .scss. You can change the extension of an existing file to get rolling.

From your project directory run:

sass --watch style.scss:style.css

This will compile your .scss file into a .css file.

Variables

Use variables to store values you use all over the place.

CSS

$black: rgb(30, 30, 30);
$green: rgb(116, 187, 2);
$base-font-size:   16px;
$base-line-height: 20px;

body {
  color: $black;
  font-size: $base-font-size;
  line-height: $base-line-height;
  padding: $base-font-size*2;
}

h1 {
  color: $green;
}

Sass

body {
  color: #1e1e1e;
  font-size: 16px;
  line-height: 20px;
  padding: 32px;
}

h1 {
  color: #74bb02;
}

Nesting

Stop repeating yourself and doing things over again.

Then

footer {
  border-top: 1px solid $black;
}

footer p {
  font-size: $base-font-size*.8;
}

footer p.legal {
  float: left;
}

footer p.contact {
  float: right;
}

Now

footer {
  border-top: 1px solid $black;

  p {
    font-size: $base-font-size*.8;

    a {
      color: $green;
    }

    .legal {
      float: left;
    }
  }
}

Mixins

Create reusable chunks of CSS properties with @mixin and apply with @include.

$sans-serif: "Helvetica Neue", sans-serif;
$serif: Georgia, serif;

@mixin font-body {
  font-family: $sans-serif;
  font-weight: 400;
}

@mixin font-headers {
  font-family: $serif;
  font-weight: 400;
}

body {
  @include font-body;
}

h1 {
  @include font-headers;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 400;
}

h1 {
  font-family: Georgia, serif;
  font-weight: 400;
}

Inheritance

One selector can inherit properties from another without duplication using @extend.

Sass

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

CSS

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Extend placeholder

Instead of a class you can create a set of properties that don't write directly to the CSS unless applied with @extend.

Sass

%message {
  border: 1px black;
  border-radius: 5px;
  font-size: .9em;
}

.error {
  @extend %message;
  background: red;
}

.success {
  @extend %message;
  background: green;
}

CSS

.error, .success {
  border: 2px solid black;
  border-radius: 5px;
  font-size: .9em;
  margin-bottom: 1em;
  padding: .5em;
}

.error {
  background: red;
}

.success {
  background: green;
}

Mixin, Extend or Class?

Decide what works best in your project. Mixins can create duplicate CSS

Do you want your HTML filled with classes?
Do you want a little bit ofduplication in your compiled CSS?

As a rule of thumb, it’s better to never extend a class selector and always to use a placeholder selector in it’s place instead.
Chris Lamb

Compass

Compass is a collection of helpful tools and battle-tested best practices for Sass.

Compass is a CSS authoring framework that uses Sass.
Compass is written in Ruby and distributed via RubyGems.
Compass is project aware. It helps manage images, scripts and fonts too..

Installing Compass

It's slightly different by platform, but essentially boils down to the following command:

gem install compass

Just getting started?

Install compass and Sass will be installed for you.

http://snugug.com/musings/installing-sass-and-compass-across-all-platform

Create a Compass project

Compass will create a project directory for you. If you’re creating a new Drupal theme…

cd sites/all/themes
compass create theme_name

This will create a directory called "theme_name" with subdirectories and a config.rb file.

Use Compass

Compass uses its own compiler. So now instead of

sass --watch style.scss:style.css

we now use

compass watch

Compass is now watching for changes and will compile when you save files with changes.

Compass Core

Compass provides a robust set of code patterns for re-use.

CSS3: cross-browser mixins
Typography: common typographic patterns
Utilities: common style patterns

CSS3

Compass writes out CSS3 properties with browser fallbacks.

Sass

%message {
  @include border-radius(3px);
  @include box-shadow();
  border: 1px black;
}

.error {
  @extend %message;
  background: red;
}

.success {
  @extend %message;
  background: green;
}

CSS

.error, .success {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 2px 10px 2px #323232;
  -moz-box-shadow: 0 2px 10px 2px #323232;
  box-shadow: 0 2px 10px 2px #323232;
  border: 1px black;
  margin-bottom: 1em;
}

.error {
  background: red;
}

.success {
  background: green;
}

Typography

Compass ships with a very powerful (and slightly confusing) vertical rhythm system.

Sass

@include establish-baseline;
h1 {
  @include adjust-font-size-to(39px, 2);
  @include rhythm(0, 0, 0, 1, 39px);
}

CSS

html {
  font-size: 16px;
  line-height: 1.25em;
}

h1 {
  font-size: 2.4375em;
  line-height: 1.02564em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 0.51282em;
}

Utilities

Compass has some great utilities for text, lists, image replacement, and more.

Sass

nav {
  ul {
    @include inline-block-list(1em);
  }
}

#{headings(1,4)} {
  @include font-headers;

  a {
    @include link-colors(inherit, $hover, $active, inherit, $focus);
  }
}

CSS

nav ul {
  margin: 0;
  padding: 0;
  border: 0;
}

nav ul:after {
  content: "";
  display: table;
  clear: both;
}

nav ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  white-space: nowrap;
  padding-left: 1em;
  padding-right: 1em;
}

h1, h2, h3, h4 {
  font-family: Georgia, serif;
  font-weight: 400;
}

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited {
  color: inherit;
}

h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus {
  color: #448087;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
  color: #448087;
}

h1 a:active, h2 a:active, h3 a:active, h4 a:active {
  color: #141414;
}

Compass Extensions

Compass extensions allow for the inclusion of stylesheet libraries, templates, patterns, and more.

My current favorites

Breakpoint: Really Simple Media Queries
Singularity: Grids Without Limits
Sassy Buttons: Beautiful buttons
Toolkit: your swiss army knife for Progressive Enhancement and Responsive Web Design

Using Compass Extensions

On the command line


                gem install {extension}

In your config.rb file


                require '{extension}'

In your SCSS base


                @import '{extension}'

Breakpoint

Set breakpoint variables and do amazing things!


// Your basic media queries, min-width and min/max width, are super easy!
$basic: 543px;
$pair: 456px 794px;

#foo {
  content: 'No Media Queries';

  @include breakpoint($basic) {
    content: 'Basic Media Query';
  }

  @include breakpoint($pair) {
    content: 'Paired Media Query';
  }
}

Singularity

A ratio based grid framework that helps you leave 960 in the dust! Works well with Breakpoint too.


$grids: 12;
$grids: add-grid(2 8 2 at $desk);
$gutters: 1/3;

article {
  @include breakpoint($desk) {
    @include grid-span(8, 3);
  }
}

aside {
  @include breakpoint($desk) {
    @include grid-span(2, 1);
  }
}

Sassy Buttons


button {
  @include sassy-button("shiny", 15px, 26px, #ffd71a, #ffaa1a);
}

Toolkit

Toolkit bundles a bunch of useful responsive tools into one, well… toolkit.

Border Box
Fluid Media
Progressive Enhancement
Clearfix
Vertical Center
Color Functions
other stuff

Sass & Compass with Drupal

Yes, there are Drupal modules with these names.

No. I have not used these. I'm not entirely sure why you would want to.

Sass and Compass are authoring tools, not server side components.

Resources

Use your favorite search engine to find thousands of articles to help you.

Read this presentation from Sam Richard for more depth on what we covered tonight.

Sass

Compass

http://jasonbell.github.io/dcfv-sass/

SASS & COMPASS

Jason Bell

Sass

Installing Sass

Create a Sass project

Variables

CSS

Sass

Nesting

Then

Now

Mixins

Inheritance

Sass

CSS

Extend placeholder

Sass

CSS

Mixin, Extend or Class?

Compass

Installing Compass

Just getting started?

Create a Compass project

Use Compass

Compass Core

CSS3

Sass

CSS

Typography

Sass

CSS

Utilities

Sass

CSS

Compass Extensions

My current favorites

Using Compass Extensions

Breakpoint

Singularity

Sassy Buttons

Toolkit

Sass & Compass with Drupal

Resources

Sass

Compass