SASS Compass Spriting Introduction

Intro into SASS and Compass and how to use Sprites.

Unfortunately while exported into PDF the vertical columns where converted to horizontal ones. Find the original here:
goo.gl/eWZKu

Transcript

1. SASS / COMPASS / SPRITES
2. ME Christoph Klocker Coder Rubyist love Rails Find me: @corck www.vedanova.com
3. Disclaimer I don't use animated gifs in my presentations ... people seem to love them
4. TOPICS SASS Overview Compass Spriting Beispiele
5. 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
6. 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; }
7. 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
8. VARIABLES GIVE VARIABLES A MEANINGFUL NAME Bad: $blue-1 Good: $section-header-blue
9. 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
10. 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
11. 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;
12. 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 {
13. MIXINS Reusable blocks of code Write once, use everywhere Take arguments ... set defaults
14. 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;
15. 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; }
16. USE COMPASS PREDEFINED avoids missing browser flags prevents spelling errors new browser flags are added (update)
17. 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);
18. @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)
19. 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"
20. @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
21. @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;
22. CONTROL LOGIC @if @for @each @while
23. @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%;
24. @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;
25. 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; }
26. COMPASS
27. COMPASS Pre defined mixins Cross browser support CSS3 made easy Sprites Utilities Reset
28. 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"
29. 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);
30. 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 {
31. CSS3 gotchas! IE < 10 won't rotate arrow! Make sure it works on IE ... maybe its acceptable that it won't work
32. SPRITES
33. SPRITES
34. Fewer images == fewer requests WHY SPRITES => Faster Websites
35. 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!
36. SPRITES +all-flags-sprites
37. 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 !!
38. 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; }
39. 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;}
40. 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 {
41. SPRITES Sprite container <i class="german-flag"></i>
42. SPRITE LAYOUTS vertical (default)
43. SPRITE LAYOUTS horizontal: $mysprite-layout:horizontal;
44. SPRITE LAYOUTS Diagonal $mysprite-layout:diagonal;
45. Most efficient use of browser memory SPRITE LAYOUTS Smart $mysprite-layout:smart;
46. EXAMPLES
47. I couldn't resist ;) @corck www.vedanova.com THANKS