Sass        :   CSS                                                                             011                       ...
Why does CSS suck?
Why does CSS suck?★ Redundancy
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {}     #block-menu-block-main-m...
Sass sucks less
Sass sucks less★ Sass is easy to learn:  It is CSS + goodies
Sass sucks less★ Sass is easy to learn:  It is CSS + goodies★ Browsers don’t understand sass
Sass sucks less★ Sass is easy to learn:  It is CSS + goodies★ Browsers don’t understand sass★ Sass is compiled
.empty-rules {}// and comments
.empty-rules {}  // and comments★ // Comments are not in rendered CSS
.empty-rules {}  // and comments★ // Comments are not in rendered CSS★ /* Comments _are_ in rendered CSS */
.empty-rules {}  // and comments★ // Comments are not in rendered CSS★ /* Comments _are_ in rendered CSS */★ .empty-rulese...
nested { rules }
nested { rules }★ .block {      font-size: 12px;      h2 {        font-size: 18px; // Hell, yeah!      }  }
nested { rules }★ .block {      font-size: 12px;      h2 {        font-size: 18px; // Hell, yeah!      }  }★ .block { font...
nested { rules }
nested { rules }★   #block-menu-block-main-menu-level-tertiary   .content   a:link {}    #block-menu-block-main-menu-level...
nested { rules }★   #block-menu-block-main-menu-level-tertiary   .content   a:link {}    #block-menu-block-main-menu-level...
nested { rules }★   #block-menu-block-main-menu-level-tertiary   .content   a:link {}    #block-menu-block-main-menu-level...
nested { rules }
nested { rules }★   .block {      margin-bottom: 1.5em;        &.last { // Last block in region          margin-bottom: 0;...
nested { rules }★   .block {      margin-bottom: 1.5em;        &.last { // Last block in region          margin-bottom: 0;...
nested-properties
nested-properties★ border: 2px solid #333;  border-left: 1px dotted #ccc;
nested-properties★ border: 2px solid #333;  border-left: 1px dotted #ccc;★ border: 2px solid #333 {      left: 1px dotted ...
$variables
$variables★ $blue: #3bbfce;  $default-font: Georgia, "Times New Roman",  "DejaVu Serif", serif;
Math * 2
Math * 2★ $grid-width: 960px / 8;
Math * 2★ $grid-width: 960px / 8;★ Any of these: + - * / %
functions()http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
functions()  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions  rgb(), rgba(), mix()
functions()  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions  rgb(), rgba(), mix()★ HSL functio...
functions()  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions  rgb(), rgba(), mix()★ HSL functio...
functions()  http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions  rgb(), rgba(), mix()★ HSL functio...
_Partials
_Partials★ Shared resources for your project.
_Partials★ Shared resources for your project.★ Name them with an underscore.  Include them without an underscore.
_Partials★ Shared resources for your project.★ Name them with an underscore.  Include them without an underscore.★ @includ...
@ mixins
@ mixins★ #main {      @include element-invisible;  }
compile / watch
compile / watch★ sass sass/style.scss css/style.css
compile / watch★ sass sass/style.scss css/style.css★ sass --watch sass:css
FireSass
FireSass★ sass --debug-info --watch sass:css
Compass
Compass★ package manager
Compass★ package manager★ frameworks/groups of pre-built functionality
compass watch
compass watch★ The magic is in config.rb
compass watch★ The magic is in config.rb★ compass watch .
More Awesome
More Awesome★ Sass: http://sass-lang.com
More Awesome★ Sass: http://sass-lang.com★ Compass: http://compass-style.org
More Awesome★ Sass: http://sass-lang.com★ Compass: http://compass-style.org★ Zen 7.x-5.x
Upcoming SlideShare
Loading in …5
×

Sass: CSS with Attitude

1,941 views
1,834 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,941
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sass: CSS with Attitude

    1. 1. Sass : CSS 011 ign w ith A s ttitu Berlin 2 al De de June Drup Camp 6 25+2 John Albin W @Joh ilkins nAlbihttp:/ n /www .flickr .com /phot os/phil yfn/5 5627 5594 3/
    2. 2. Why does CSS suck?
    3. 3. Why does CSS suck?★ Redundancy
    4. 4. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
    5. 5. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy
    6. 6. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }
    7. 7. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy
    8. 8. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc;
    9. 9. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc;
    10. 10. Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc; box-shadow: 1px 1px 10px 3px #ccc; }
    11. 11. Sass sucks less
    12. 12. Sass sucks less★ Sass is easy to learn: It is CSS + goodies
    13. 13. Sass sucks less★ Sass is easy to learn: It is CSS + goodies★ Browsers don’t understand sass
    14. 14. Sass sucks less★ Sass is easy to learn: It is CSS + goodies★ Browsers don’t understand sass★ Sass is compiled
    15. 15. .empty-rules {}// and comments
    16. 16. .empty-rules {} // and comments★ // Comments are not in rendered CSS
    17. 17. .empty-rules {} // and comments★ // Comments are not in rendered CSS★ /* Comments _are_ in rendered CSS */
    18. 18. .empty-rules {} // and comments★ // Comments are not in rendered CSS★ /* Comments _are_ in rendered CSS */★ .empty-rulesets {} // Not included.
    19. 19. nested { rules }
    20. 20. nested { rules }★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } }
    21. 21. nested { rules }★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } }★ .block { font-size: 12px; } .block h2 { font-size: 20px; }
    22. 22. nested { rules }
    23. 23. nested { rules }★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
    24. 24. nested { rules }★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
    25. 25. nested { rules }★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
    26. 26. nested { rules }
    27. 27. nested { rules }★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } }
    28. 28. nested { rules }★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } }★ .block { margin-bottom: 1.5em; } .block.last { margin-bottom: 0; } .body-class .block { margin-bottom: 2em; }
    29. 29. nested-properties
    30. 30. nested-properties★ border: 2px solid #333; border-left: 1px dotted #ccc;
    31. 31. nested-properties★ border: 2px solid #333; border-left: 1px dotted #ccc;★ border: 2px solid #333 { left: 1px dotted #ccc; // border-left top { width: 1px; // border-top-width } }
    32. 32. $variables
    33. 33. $variables★ $blue: #3bbfce; $default-font: Georgia, "Times New Roman", "DejaVu Serif", serif;
    34. 34. Math * 2
    35. 35. Math * 2★ $grid-width: 960px / 8;
    36. 36. Math * 2★ $grid-width: 960px / 8;★ Any of these: + - * / %
    37. 37. functions()http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
    38. 38. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()
    39. 39. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()★ HSL functions hsla(), lighten(), darken(), desaturate()
    40. 40. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()★ HSL functions hsla(), lighten(), darken(), desaturate()★ Opacity functions opacify(), transparentize()
    41. 41. functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()★ HSL functions hsla(), lighten(), darken(), desaturate()★ Opacity functions opacify(), transparentize()★ Make your own! ponycorn()
    42. 42. _Partials
    43. 43. _Partials★ Shared resources for your project.
    44. 44. _Partials★ Shared resources for your project.★ Name them with an underscore. Include them without an underscore.
    45. 45. _Partials★ Shared resources for your project.★ Name them with an underscore. Include them without an underscore.★ @include “partial”;
    46. 46. @ mixins
    47. 47. @ mixins★ #main { @include element-invisible; }
    48. 48. compile / watch
    49. 49. compile / watch★ sass sass/style.scss css/style.css
    50. 50. compile / watch★ sass sass/style.scss css/style.css★ sass --watch sass:css
    51. 51. FireSass
    52. 52. FireSass★ sass --debug-info --watch sass:css
    53. 53. Compass
    54. 54. Compass★ package manager
    55. 55. Compass★ package manager★ frameworks/groups of pre-built functionality
    56. 56. compass watch
    57. 57. compass watch★ The magic is in config.rb
    58. 58. compass watch★ The magic is in config.rb★ compass watch .
    59. 59. More Awesome
    60. 60. More Awesome★ Sass: http://sass-lang.com
    61. 61. More Awesome★ Sass: http://sass-lang.com★ Compass: http://compass-style.org
    62. 62. More Awesome★ Sass: http://sass-lang.com★ Compass: http://compass-style.org★ Zen 7.x-5.x

    ×