Welcome

Sass

What is Sass?

Its a preprocesor

What does it do?

  • Variables $foo
  • Mixins @mixin
  • Functions
  • Selector Inheritance @extend, &
  • Control Directives @if, @for, @each, @while
  • Its a language!

Variables

  $foo : #fffff;
  $bar : (1px * 2em) / 4px;

Lists

  border : 1px solid black;

  $my-list : 1px solid black;
  $my-list2 : 1px, solid, black;
  $my-list3 : (1px solid black);

  border : $my-list;

In ruby

  Sass::Script::List.new(['1px', 'solid', 'black'], ',')

List Functions

  • length($list)
  • nth($list, $n)
  • join($list1, $list2, [$separator])
  • More coming soon!

Functions and Mixins

@function get-stops($colors, $stops) {
  $out:();
  @each $color in $colors {
    $i: index($colors, $color);
    $stop: 0% + nth($stops, $i);
    $out: append($out, $color $stop, 'comma');
  }
  @return $out;
}

@mixin menu-level2-active {
  $args: get-stops($menu-active-colors, $menu-active-stops);
  @include background(linear-gradient($menu-active-direction, $args));
}

Inheritance

a {
  color : $link-color;

  &:hover {
    color : $link-hover-color;
  }
}

a { color : blue; }
a:hover { color : red; }

Extend

.foo {
  font-size : 10px;
}

.bar {
  @extend .foo;
}

.foo, .bar {
  font-size : 10px;
}

Extending with ruby

def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
  sprite = convert_sprite_name(sprite)    
  verify_map(map)
  unless sprite.is_a?(Sass::Script::String)
    raise Sass::SyntaxError
  end
  url = sprite_url(map)
  position = sprite_position(map, sprite, offset_x, offset_y)
  Sass::Script::List.new([url] + position.value, :space)
end
Sass::Script::Functions.declare :sprite, [:map, :sprite]
Sass::Script::Functions.declare :sprite, [:map, :sprite, :offset_x]
Sass::Script::Functions.declare :sprite, [:map, :sprite, :offset_x, :offset_y]

Data types

  • Bool
  • Color
  • List
  • Number
  • String

Best Practices

Colors

This is bad

$orange        : rgb(138, 182, 225) !default;
$blue          : rgb(33,89,167) !default;
$lighter-blue  : rgb(138, 182, 225) !default;
$gray          : rgb(63,63,63) !default;
$dark-gray     : rgb(33,33,33) !default;
$light-gray    : rgb(109,109,109) !default;
$lighter-gray  : rgb(150,150,150) !default;
$lightest-gray : rgb(188,188,188) !default;

.foo {
  color : $blue;
}

This is ok, but we can do better

// dark gray
$text-color                      : rgb(33,33,33) !default;
// lightest gray
$text-compliment-color           : rgb(188,188,188) !default;
//h1, h2
$title-color                     : rgb(63,63,63) !default;
// blue
$primary-accent-color            : rgb(33,89,167) !default;
// blue on dark
$primary-accent-compliment-color : rgb(138, 182, 225) !default;
//orange - link color
$secondary-accent-color          : rgb(199, 105, 0) !default;
// light gray
$ancillary-color                 : rgb(109,109,109) !default;
// lighter gray
$ancillary-compliment-color      : rgb(150,150,150) !default;

Pallets

// _pallet.scss
$orange        : rgb(138, 182, 225) !default;
$blue          : rgb(33,89,167) !default;
$lighter-blue  : rgb(138, 182, 225) !default;
$gray          : rgb(63,63,63) !default;
$light-gray    : rgb(109,109,109) !default;
$lighter-gray  : rgb(150,150,150) !default;
$lightest-gray : rgb(188,188,188) !default;

// _colors.scss
//text
$text-color                      : $dark-gray;
$text-compliment-color           : $lightest-gray;
$title-color                     : $gray;
$primary-accent-color            : $blue;
$primary-accent-compliment-color : $lighter-blue;
$secondary-accent-color          : $orange;
$ancillary-color                 : $light-gray;
$ancillary-compliment-color      : $lighter-gray;

Only use your pallet colors to define your more descriptive color variables!

Variables Definitions

$height : 2px;
// There are 100 lines before this
.content_head {
  @include clearfix;
  
  .hr { 
    padding-top   : (rhythm(1) / 2) - $height;
    width         : 100%;
    border-bottom : $height solid $secondary-accent-color;
    margin-bottom : 10px;
    display       : block;
    @extend .float-right;
  }

  .release_identifiers {
    @extend .float-right;
    text-align  : right;
    font-family : $ancillary-font;
  }
}

Always define your variables at the top of each file!

  • Easy to find
  • Easy to update
  • No surprises
/* Local Variables */
$release-content-height      : rhythm(2);
$section-side-width          : column-width(4) + $sidebar-width;
$group-image-height          : rhythm(6);

.show {
  h1 {
    @include header(3);
    @include trailer;
    color  : $primary-accent-color;
  }
  // ... goes on for 100+ lines

Math

Is your best friend

Almost every thing a designer does can be converted into some sort of mathmatical layout... ALMOST

Layout

$wrapper-width      : 960px;
$sidebar-width      : 50px;
$main-content-width : $wrapper - $sidebar;

.wrapper {
  width : $wrapper-width;
}

.sidebar {
  width : $sidebar-width;
}

.content {
  width : $main-content-width;
}

Ranges

@for $i from 1 through 4 {
  h#{$i} {
    @include header($i);
  }
}

Image demensions

.play {
  left: ($width / 2) - (global-sprite-width(play_movie) / 2);
  top: ($height / 2) - (global-sprite-height(play_movie) / 2);
}

Inheritance

Inception rule!

Well you can but it gets messy

.foo {
  width: 5px;
  .bar {
    height: 20px;
    .baz {
      color : red;
      .what-comes-after-baz {
        border : green solid 1px;
        &.something {
          @extend .float-left;
        }
      }    
    }
  }
}

And slow

Selector layout

.release_title a{
  @extend h3;
  @include adjust-font-size-to(20px, 1);
  @include trailer;
  
  text-decoration : none;
  display         : block;
  
  &:hover {
   color:$hover-color; 
  }
}

Compass

http://compass-style.org

  • Stylesheet framework
  • Considered sass standard library
  • Standalone application
  • Has the ability to have application integrations (rails, django, etc.)

Currently the only application integration supported by the core team is rails

Features

  • Sprites
  • CSS3
  • Layout tools
  • And much more

Sprites!

  • Fewer http requests.
  • You don't have a bunch of individual images to manage.
  • Customizable
  • ITS EASY!

This EASY!

@import "my-icons/*.png";
@include all-my-icons-sprites;

BAM!

.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { 
  background: url('/images/my-icons-s34fe0604ab.png') no-repeat; 
}

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }

Sprite Layouts

Vertical (default)

Horizontal

Diagonal

Smart

Magic Selectors

  • my-buttons/glossy.png
  • my-buttons/glossy_hover.png
  • my-buttons/glossy_active.png
  • my-buttons/glossy_target.png

Example

@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}

BAM!

.my-buttons-sprite, a {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.glossy-hover {
  background-position: 0 -40px;
}
a:target, a.glossy-target {
  background-position: 0 -60px;
}
a:active, a.glossy-active {
  background-position: 0 -20;
}

Beware of your file size!

We support most CSS3 properties with vendor prefix's.

  • Gradients
  • Shadows
  • Box model
  • Transitions
  • Much more

Layout tools

  • Grid
  • Vertical rhythm
  • And more!
.grid {
  @include grid-background($total, $column, $gutter, $baseline, 
                           $offset, $column-color, $gutter-color, 
                           $baseline-color, $force-fluid)
}

Vertical rhythm

The spacing and arrangement of text as the reader descends the page.

"Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost." - 24ways.org

  • Height : rhythms
  • Width : columns
$release-content-height            : rhythm(2);

$section-side-width                : column-width(4);

$primary-image-caption-line-height : floor($base-line-height / 2); 

$group-image-height                : rhythm(6);

.contents .show {
  h1 {
    @include header(3);
    @include padding-leader;
    @include trailer;
    color  : $primary-accent-color;
  }
// etc ...

http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

Extensions

  • fancy-buttons
  • sassy-buttons
  • susy
  • blueprint
  • twitter-bootstrap
  • etc...

The future!

Sass

  • Associative array data type (Hash)
  • Better list functions
  • @content

@content

 @mixin do-something {
  font-size : 12px;
  color     : red;
  @content;
 }

p {
  @include do-something {
    color : blue;
  }
}

p {
  font-size : 12px;
  color : red;
  color : blue;
}

Compass

  • Media query framework
  • A css hacks library
  • Extract blueprint from compass to a stand alone framework

We need help!

https://github.com/chriseppstein/compass

  • Documentation
  • Stylesheet cleanup
  • Code Refactoring

Core Team

  • Chris Eppstein - chriseppstein.github.com
  • Scott Davis (me) - scottdavis.github.com
  • Brandon Mathis - brandonmathis.com
  • Eric Meyer (The other one) - eric.oddbird.net
  • Anthony Short - anthonyshort.me

Charity

United Mitochondrial Disease Foundation

Please donate - http://umdf.org/compass

Questions!