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