Slide 1

Slide 1 text

SASS / COMPASS / SPRITES

Slide 2

Slide 2 text

ME Christoph Klocker Coder Rubyist love Rails Find me: @corck www.vedanova.com

Slide 3

Slide 3 text

Disclaimer I don't use animated gifs in my presentations ... people seem to love them

Slide 4

Slide 4 text

TOPICS SASS Overview Compass Spriting Beispiele

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

VARIABLES GIVE VARIABLES A MEANINGFUL NAME Bad: $blue-1 Good: $section-header-blue

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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;

Slide 12

Slide 12 text

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 {

Slide 13

Slide 13 text

MIXINS Reusable blocks of code Write once, use everywhere Take arguments ... set defaults

Slide 14

Slide 14 text

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;

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

USE COMPASS PREDEFINED avoids missing browser flags prevents spelling errors new browser flags are added (update)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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"

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

CONTROL LOGIC @if @for @each @while

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

COMPASS

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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"

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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 {

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

SPRITES

Slide 33

Slide 33 text

SPRITES

Slide 34

Slide 34 text

Fewer images == fewer requests WHY SPRITES => Faster Websites

Slide 35

Slide 35 text

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!

Slide 36

Slide 36 text

SPRITES +all-flags-sprites

Slide 37

Slide 37 text

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 !!

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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 {

Slide 41

Slide 41 text

SPRITES Sprite container

Slide 42

Slide 42 text

SPRITE LAYOUTS vertical (default)

Slide 43

Slide 43 text

SPRITE LAYOUTS horizontal: $mysprite-layout:horizontal;

Slide 44

Slide 44 text

SPRITE LAYOUTS Diagonal $mysprite-layout:diagonal;

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

EXAMPLES

Slide 47

Slide 47 text

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