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 

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 

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; 

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 { 

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; 

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

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

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

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 { 

CSS3 gotchas! IE < 10 won't rotate arrow! Make sure it works on IE ... maybe its acceptable that it won't work 

SPRITES 

SPRITES 

Fewer images == fewer requests 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;} 

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 { 

SPRITES Sprite container 

SPRITE LAYOUTS vertical (default) 

SPRITE LAYOUTS horizontal: $mysprite-layout:horizontal; 

SPRITE LAYOUTS Diagonal $mysprite-layout:diagonal; 

Most efficient use of browser memory SPRITE LAYOUTS Smart $mysprite-layout:smart; 

EXAMPLES 

I couldn't resist ;) @corck www.vedanova.com THANKS