SASS Compass Spriting Introduction

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

29e274836368b07e18b71d0697140260?s=128

vedanova

July 19, 2013
Tweet

Transcript

  1. 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
  2. 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; }
  3. 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
  4. 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
  5. 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
  6. 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;
  7. 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 {
  8. 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;
  9. 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; }
  10. 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);
  11. 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)
  12. 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"
  13. 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
  14. 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;
  15. 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%;
  16. 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;
  17. 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; }
  18. 26.
  19. 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"
  20. 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);
  21. 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 {
  22. 31.

    CSS3 gotchas! IE < 10 won't rotate arrow! Make sure

    it works on IE ... maybe its acceptable that it won't work
  23. 32.
  24. 33.
  25. 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!
  26. 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 !!
  27. 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; }
  28. 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;}
  29. 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 {
  30. 46.