Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS_Preprocessor

hariharan
August 13, 2012

 CSS_Preprocessor

CSS_Preprocessor

hariharan

August 13, 2012
Tweet

Transcript

  1. @bermonpainter #teamsass HISTORY OF CSS Non-linear, wibbly wobbly, timey wimey…stuff

    @bermonpainter #teamsass http://images2.fanpop.com/images/photos/6200000/Tardis-in-Space-tardis-6289810-1280-768.jpg
  2. @bermonpainter #teamsass HISTORY OF CSS Wouldn’t it be nice if

    you could tar et multiple versions of IE and not use hacks?
  3. @bermonpainter #teamsass HISTORY OF CSS <!--[if IE 6]> <link rel="stylesheet"

    type="text/css" href="ie6.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> <!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css"> <![endif]-->
  4. @bermonpainter #teamsass HISTORY OF CSS Wouldn’t it be nice if

    you could separate your CSS, tar et multiple versions of IE, not use hacks and serve a sin le CSS file a ain?
  5. @bermonpainter #teamsass HISTORY OF CSS Wouldn’t it be nice if

    you could separate your CSS, tar et multiple versions of IE, not use hacks, serve a sin le CSS file a ain, without impactin performance?
  6. @bermonpainter #teamsass HISTORY OF CSS <!--[if lt IE 7]> <html

    class="ie6"> <![endif]--> <!--[if IE 7]> <html class="ie7"> <![endif]--> <!--[if IE 8]> <html class="ie8"> <![endif]-->
  7. @bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus A system written

    in another lan ua e that adds lots of tasty oodies that don’t exist in CSS, ivin you more control, while still spittin out somethin a browser can understand.
  8. @bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus If you write

    poor CSS, a pre- processor won’t make it suck less.
  9. @bermonpainter #teamsass COMMAND LINE gem install sass mv style.css style.scss

    sass style.scss style.css Sass <install homebrew> <install node> <install npm> npm install less lessc style.less Less <install homebrew> <install node> <install npm> npm install stylus stylus -c style.styl Stylus
  10. @bermonpainter #teamsass SYNTAX /* SCSS */ .widget { margin: 20px

    10px; } /* Sass */ .widget margin: 20px 10px Sass .widget { margin: 20px 10px; } Less .widget margin 20px 10px Stylus
  11. @bermonpainter #teamsass BEGINNER Sass Variables Less Stylus $colorPrimary: #333; $siteWidth:

    960px; body { color: $colorPrimary; width: $siteWidth; } @colorPrimary: #333; @siteWidth: 960px; body { color: @colorPrimary; width: @siteWidth; } colorPrimary = #333 siteWidth = 960px body color colorPrimary width siteWidth
  12. @bermonpainter #teamsass BEGINNER Nestin nav { width: 200px; } nav

    ul { list-style: none; } nav ul li { background: #ccc; } nav ul li a{ color: #333; }
  13. @bermonpainter #teamsass BEGINNER Nestin Sass nav { width: 200px ul

    { list-style: none; li { background: #ccc; a { color: #ccc; } } } } Less nav width 200px ul list-style none li background #ccc a color: #ccc Stylus nav { width: 200px ul { list-style: none; li { background: #ccc; a { color: #ccc; } } } }
  14. @bermonpainter #teamsass BEGINNER Nestin - Output nav { width: 200px;

    } nav ul { list-style: none; } nav ul li { background: #ccc; } nav ul li a{ color: #333; }
  15. @bermonpainter #teamsass BEGINNER Nestin Sass nav { width: 200px; ul

    { list-style: none; } li { background: #ccc; } a { color: #ccc; } } Less nav width 200px ul list-style none li background #ccc a color #ccc Stylus nav { width: 200px; ul { list-style: none; } li { background: #ccc; } a { color: #ccc; } }
  16. @bermonpainter #teamsass BEGINNER Nestin - Output nav { width: 200px;

    } nav ul { list-style: none; } nav li { background: #ccc; } nav a{ color: #333; }
  17. @bermonpainter #teamsass BEGINNER @import Sass @import "setup"; @import "reset"; @import

    "base"; @import "layout"; @import "typography"; @import "theme"; Less @import "setup" @import "reset" @import "base" @import "layout" @import "typography" @import "theme" Stylus @import "setup"; @import "reset"; @import "base"; @import "layout"; @import "typography"; @import "theme";
  18. @bermonpainter #teamsass INTERMEDIATE Mixins Vendor Prefix Madness .box { -webkit-border-radius:

    5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
  19. @bermonpainter #teamsass INTERMEDIATE Mixins Sass @mixin borderRadius($radius) { -webkit-border-radius: $radius;

    -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include borderRadius(5px); }
  20. @bermonpainter #teamsass INTERMEDIATE Mixins Less .borderRadius(@radius) { -webkit-border-radius: @radius; -moz-border-radius:

    @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .box { .borderRadius(5px); }
  21. @bermonpainter #teamsass INTERMEDIATE Mixins Stylus roundedCorner(radius) -webkit-border-radius radius -moz-border-radius radius

    -ms-border-radius radius -o-border-radius radius border-radius radius .box roundedCorner(5px)
  22. @bermonpainter #teamsass INTERMEDIATE Mixins - Compiled .box { -webkit-border-radius: 5px;

    -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
  23. @bermonpainter #teamsass INTERMEDIATE @extend Sass Stylus .borders border 1px solid

    #efefef padding 10px p @extend .borders font-size 20px ul, ol @extend .borders text-transform uppercase .borders { border: 1px solid #efefef; padding: 10px; } p { @extend .borders; font-size: 20px; } ul, ol { @extend .borders; text-transform: uppercase; }
  24. @bermonpainter #teamsass INTERMEDIATE @extend - output .borders, p, ul, ol

    { border: 1px solid #efefef; padding: 10px; } p { font-size: 20px; } ul, ol { text-transform: uppercase; }
  25. @bermonpainter #teamsass INTERMEDIATE @extend - output Sass Placeholder Directive %borders

    { border: 1px solid #efefef; padding: 10px; } p { @extend .borders; font-size: 20px; } ul, ol { @extend .borders; text-transform: uppercase; }
  26. @bermonpainter #teamsass INTERMEDIATE @extend - output p, ul, ol {

    border: 1px solid #efefef; padding: 10px; } p { font-size: 20px; } ul, ol { text-transform: uppercase; } Sass Placeholder Directive
  27. @bermonpainter #teamsass INTERMEDIATE Reference Parent Selector, & Sass, Less, Stylus

    nav { margin: 20px; padding: 20px; .ie7 & { padding: 0px; } }
  28. @bermonpainter #teamsass INTERMEDIATE nav { margin: 20px; padding: 20px; }

    .ie7 nav { padding: 0px; } Reference Parent Selector, &
  29. @bermonpainter #teamsass ADVANCED Lo ic Sass when Less if else

    if else unless Stylus if else then for while
  30. @bermonpainter #teamsass ADVANCED nav { /* styles */ } /*

    styles */ @media (max-width: 480px) { nav { /* responsive styles */ } } Media Queries
  31. @bermonpainter #teamsass ADVANCED nav { /* styles */ @media (max-width:

    480px) { /* responsive styles */ } } Media Queries Sass, Less nav /* styles */ @media (max-width: 480px) /* responsive styles */ Stylus
  32. @bermonpainter #teamsass ADVANCED @mixin respond-to($name){ @if $name == small-screen {

    @media only screen and (min-width: 320px) { @content } } @if $name == large-screen { @media only screen and (min-width: 960px) { @content } } } aside { width: 25% @include respond-to(small-screen) { width: 100%; } } Media Queries Sass