SASS / Compass / Sprites

Me

Christoph Klocker

Coder

Rubyist

love Rails


Find me:

@corck

www.vedanova.com





Disclaimer
I don't use animated gifs in my
presentations

... people seem to love them

Topics


  • SASS Overview
  • Compass
  • Spriting
  • Beispiele

SASS - SCSS

#sass
// variables
$default_width: 500px
$sidebar_width: 150px
// mixins
@mixin box($width: 100px)
  width: $width

.default_box
  +box($default_width)

//nesting
.content
  #sidebar
    width: $default_width
  &.wide
    width: $default_width + 20

#scss
// variables
$default_width: 500px;
$sidebar_width: 150px;
// mixins
=box($width: 100px) {
 width: $width;
}
.default_box {
  @include box($default_width);
}

//nesting
.content {
  #sidebar {
    width: $default_width;
  }
  &.wide {
    width: $default_width + 20
  }
}

VAriables

#CSS
h1 {
  font-family: Helvetica, sans-serif;
  font-size: 1.5em;
  color: #999999; }

h2 {
  font-family: Helvetica, sans-serif;
  font-size: 1.2em;
  color: #999999; }

p {
  font-family: Times, serif;
  font-size: 1em;
  color: #111111; }

VAriables

#CSS
h1 {
  font-family: Helvetica, sans-serif;
  font-size: 1.5em;
  color: #999999; }

h2 {
  font-family: Helvetica, sans-serif;
  font-size: 1.2em;
  color: #999999; }

p {
  font-family: Times, serif;
  font-size: 1em;
  color: #111111; }
#SASS
$base-font-size: 1em
$base-font: Times, serif
$headline-font: Helvetica, sans-serif
$headline-color: #999999
$font-black: #111

h1
  font-family: $headline-font
  font-size: $base-font-size * 1.5
  color: $headline-color
h2
  font-family: $headline-font
  font-size: $base-font-size * 1.2
  color: $headline-color
p
  font-family: $base-font
  font-size: $base-font-size
  color: $font-black

Variables


Give Variables a meaningful name


Bad: $blue-1

Good: $section-header-blue

Colors

Group them in a single spot

Name them meaningful

// brand colors
$logo-blue: #333
$blue: #444
$lighter-blue: #0758d9
$headline-blue: #021c45

// buttons
//  confirm button
$button-main-border: #555


Color functions

provided by COMPASS

// brand colors
$logo-blue: #333
$blue: #043076
$lighter-blue: lighten($blue, 20%)
$headline-blue: darken($blue, 10%)
// buttons
// confirm-button
$confirm-button-color: $blue
$confirm-button-top: lighten($confirm-button, 15%)
$confirm-button-bottom: darken($confirm-button, 10%)

.confirm-btn
  border: 1px
  border-bottom-color: $confirm-button-bottom
  border-top-color: $confirm-button-top
  background-color: $confirm-button-color

NESTING

#SASS
.content
  background-color: #fff
  .row
    width: 1024px
    .span12
      section
        padding: 12px
        aside
          200px
          color: #f4f4f4
        article
          824px
          #headline
            font-size: 16pt

#CSS
.content {
    background-color: white;
}
.content .row {
    width: 1024px;
}
.content .row .span12 section {
    padding: 12px;
}
.content .row .span12 section aside {
    color: #f4f4f4;
}
.content .row .span12 section article #headline {
    font-size: 16pt;
}

NESTING - selectors

#SASS
article
  p
    font-size: 12pt
    .green
      color: green
    &.blue
      color: blue
    + .black
      color: #000000
    > small
      font-size: 8pt
    &:hover
      color: red
#CSS
article p {
  font-size: 12pt; }
  article p .green {
    color: green; }
  article p.blue {
    color: blue; }
  article p + .black {
    color: black; }
  article p > small {
    font-size: 8pt; }
  article p:hover {
    color: red; }

Mixins


Reusable blocks of code

Write once, use everywhere

Take arguments

... set defaults


Mixins

#SASS
=rounded($vert, $horz, $radius: 10px)
  border-#{$vert}-#{$horz}-radius: $radius
  -moz-border-radius-#{$vert}#{$horz}: $radius
  -webkit-border-#{$vert}-#{$horz}-radius: $radius

$top: 3px
$left: 3px

.rounded
  +rounded(top, left)
.widget
  +rounded(bottom, right)
nav
  +rounded(top, left, 5px)

footer
  // @include does work as well in SASS
  @include rounded(top, left, 8px)
#CSS
.rounded {
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}
.widget {
  border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
}
nav {
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
}
footer {
  border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -webkit-border-top-left-radius: 8px;
}

Use Compass predefined

#SASS
@import "compass/css3"

$top: 3px
$left: 3px

.compass-border
  +border-radius(4px, 4px)

#CSS
.compass-border {
  -webkit-border-radius: 3px 3px;
  -moz-border-radius: 3px / 3px;
  border-radius: 3px / 3px;
}

Use Compass predefined


  • avoids missing browser flags
  • prevents spelling errors
  • new browser flags are added (update)

SASS-SCSS

Mixin syntax

#SASS

=rounded($vert, $horz, $radius: 10px)
  border-#{$vert}-#{$horz}-radius: $radius
  -moz-border-radius-#{$vert}#{$horz}: $radius
  -webkit-border-#{$vert}-#{$horz}-radius: $radius

.rounded
  +rounded(5px, 5px)
// or
.rounded
  @include rounded(5px, 5px)
#SCSS
@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius
  -moz-border-radius-#{$vert}#{$horz}: $radius
  -webkit-border-#{$vert}-#{$horz}-radius: $radius
}

.rounded {
  @include rounded(5px, 5px);

@import

split code into files for easier maintenance

/* partials/_rounded.sass */
=rounded($vert, $horz, $radius: 10px)
  border-#{$vert}-#{$horz}-radius: $radius
  -moz-border-radius-#{$vert}#{$horz}: $radius
  -webkit-border-#{$vert}-#{$horz}-radius: $radius


/* screen.sass */
@import "partials/rounded"

.rounded
  +rounded(5px, 5px)
// or
.rounded
  @include rounded(5px, 5px)

File Structure

partials/_mixins.sass
partials/_button_mixins.sass
partials/_variables.sass
partials/_bootstrap_and_overrides.sass
admin/base.sass
admin/billing/index.sass
admin/billing/show.sass
_sessions.sass
_base.sass
application.sass

/* application.sass */
@import "partials/variables"
@import "partials/mixins"
@import "partials/boostrap_and_overrides
@import "base"
@import "admin/base"
@import "sessions"

/* admin.sass */
@import "billing/index"
@import "billing/show"



@import

allows to mix SCSS and SASS

-> reuse of existing libraries

partials/_mixins.sass
vendor/_fancy_buttons.scss
application.sass
/* application.sass */
@import "partials/mixins"
@import "partials/fancy_buttons



@extend

#sass
$header-font: Arial
$font-size: 1em

.header-style
  font: $header-font

h1
  @extend .header-style
  font-size: $font-size * 2
  color: #999

h2
  @extend h1
  font-size: $font-size * 1.2

#css
.header-style, h1, h2 {
  font: Arial;
}

h1, h2 {
  font-size: 2em;
  color: #999999;
}

h2 {
  font-size: 1.2em;
}



Control logic


  • @if
  • @for
  • @each
  • @while

@for/@if

Progress bar

#sass
.progress-bar
  @for $i from 0 through 5
    &.value-#{$i}
      width: $i * 20%
      @if $i > 4
        background-color: green

#css
.progress-bar {  background-color: yellow;}
.progress-bar.value-0 {width: 0%;}
.progress-bar.value-1 { width: 20%;}
.progress-bar.value-2 { width: 40%;}
.progress-bar.value-3 { width: 60%;}
.progress-bar.value-4 { width: 80%; }
.progress-bar.value-5 { 
  width: 100%; 
  background-color: green;}



@if

#sass

=height($height)
  height: $height
  // golden ratio
  line-height: floor($height / 1.618)

=dimensions($width, $height, $keep_line_height: false)
  @if $keep_line_height == true
    height: $height
  @else
    +height($height)
  width: $width

// with line-height
.article-tooltip
  +dimensions(15px, 30px)

// without line-height
.table-tooltip
  +dimensions(15px, 25px, true)

#css
.article-tooltip {
  height: 30px;
  line-height: 18px;
  width: 15px;
}

.table-tooltip {
  height: 25px;
  width: 15px;
}



Interpolations

#sass
@import "compass/utilities/sprites"
@import "arrows/*.png"

=arrow($direction)
  @include arrows-sprites("arrow-#{$direction}")

.arrow-left
  +arrow('left')

.arrow-right
  +arrow('right')
#css
.arrows-sprite, .arrow-left .arrows-arrow-left {
  background: url('/images/arrows-s52f1520c5a.png') no-repeat;
}
.arrow-left .arrows-arrow-left {
  background-position: 0 0;
}          
.arrow-right .arrows-arrow-right {
  background-position: 0 -100px;
}




Compass

Compass


  • Pre defined mixins
  • Cross browser support
  • CSS3 made easy
  • Sprites
  • Utilities
  • Reset

RESET

Resets all browser elements so that there is not default styling

previously

  • Yahoo Reset?
  • Reset CSS by Mayer?
  • others??


Which one to choose

now:

@import "compass/reset"


Compass / CSS3

easy to implement CSS3 functionality accross browsers

#sass
.rotate-90
  +rotate(90deg)

.rotate-180
  +rotate(180deg)

#css
.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);}
.rotate-180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}


CSS3

#sass
=arrow-rotate($direction)
  @if $direction == right
    +rotate(180deg)
  +arrows-sprites("arrow")

=arrow($direction)
  +arrows-sprites("arrow-#{$direction}")

.arrow-right
  +arrow-rotate('right')

#css
.arrows-sprite, .arrow-right .arrows-arrow {
  background: url('/images/arrows-sda52872692.png') no-repeat; }

.arrow-right {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.arrow-right .arrows-arrow {
  background-position: 0 0;
}

.arrow-left .arrows-arrow {
  background-position: 0 0;
}


CSS3

gotchas!


IE < 10 won't rotate arrow!

Make sure it works on IE

...

maybe its acceptable that it won't work





SPRITES

Sprites


Why Sprites


Fewer images == fewer requests


=>


Faster Websites

Sprites

creating sprites is really easy with compass

/* Place your imgs into a folder */
./images/flags
./images/flags/flag_de.png
./images/flags/flag_en.png
./images/flags/flag_fr.png

Import them like this

@import "flags/*.png"
+all-flags-sprites

PNG only!

Sprites

+all-flags-sprites


Sprites

generates:

#CSS
.flags-sprite, .flags-flag_de, .flags-flag_en, .flags-flag_es, .flags-flag_fr { background: url('/images/flags-s22855bd5e5.png') no-repeat;}

.flags-flag_de { background-position: 0 -51px;}
.flags-flag_en { background-position: 0 0; }
.flags-flag_es { background-position: 0 -17px; }
.flags-flag_fr { background-position: 0 -34px; }


!! For all images in folder a rule will be created !!

!! Even if you don't need them  !!

SPrites

Better to include individual icons


@import "icons/*.png"
.german-flag
  +icons-sprites("flag_de")

.icons-sprite, .german-flag .icons-flag_de {
  background: url('/images/icons-s66a0df5e0f.png') no-repeat;
}

.german-flag .icons-flag_de {
  background-position: 0 -251px;
}

SPRITES

$icons-sprite-dimensions

#sass
$icons-sprite-dimensions: true
@import "icons/*.png"
.german-flag
  +icons-sprites("flag_de")
.british-flag
  +icons-sprites("flag_en")

#css
.icons-sprite, .german-flag .icons-flag_de, .british-flag .icons-flag_en {
  background: url('/images/icons-s66a0df5e0f.png') no-repeat;
}
.german-flag .icons-flag_de {
  background-position: 0 -251px;
  height: 17px;
  width: 25px;}

.british-flag .icons-flag_en {
  background-position: 0 -200px;
  height: 17px;
  width: 25px; }

Duplicate dimensions!!

SPRITES

$icons-sprite-dimensions

#sass
$sample-flag: "flags/flag_de.png"
.icons-sprite
  width: image-width($sample-flag)
  height: image-height($sample-flag)
@import "icons/*.png"
.german-flag
  +icons-sprites("flag_de")
.british-flag
  +icons-sprites("flag_en")

#css
.icons-sprite, .german-flag .icons-flag_de, .british-flag .icons-flag_en {
  width: 25px;
  height: 17px;}
.icons-sprite, .german-flag .icons-flag_de, .british-flag .icons-flag_en {
  background: url('/images/icons-s66a0df5e0f.png') no-repeat;}
.german-flag .icons-flag_de {
  background-position: 0 -251px;}
.british-flag .icons-flag_en {
  background-position: 0 -200px;}

Dimensions 1x

Sprites


Sprite container

<i class="german-flag"></i>

Sprite Layouts

vertical (default)

Sprite Layouts

horizontal: 

$mysprite-layout:horizontal;

Sprite layouts

Diagonal

$mysprite-layout:diagonal;

Sprite Layouts

Smart

$mysprite-layout:smart;

Most efficient use of browser memory

EXAMPLES



Thanks

@corck

www.vedanova.com


I couldn't resist ;)