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 ;)

SASS / Compass / Sprites

By Christoph Vedanova

SASS / Compass / Sprites

Introduction into SASS and Compass

  • 2,454