FCIP SASS Talk

1,385 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,385
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide




























  • FCIP SASS Talk

    1. 1. SASS / SCSS / LESS Variables, Math, Reusable Code, Happiness
    2. 2. WHAT’S WRONG WITH CSS And an easy way to fix it
    3. 3. REPEATED CODE (NOT DRY) #table th { /* ... */ } #table td { /* ... */ } #table td a { /* ... */ } #table td a:hover { /* ... */ }
    4. 4. CSS3 RULE EXPLOSION #header { color: #CCC; background-color: #111; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -o-box-shadow: 0 5px 10px #222; -webkit-box-shadow: 0 5px 10px #222; -moz-box-shadow: 0 5px 10px #222; box-shadow: 0 5px 10px #222; }
    5. 5. CSS3 RULE EXPLOSION #header { color: #CCC; background-color: #111; -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); -o-transform: matrix(1, 0, 0.6, 1, 250, 0); }
    6. 6. CSS3 RULE EXPLOSION @import css3_helpers @import colors #header color: $header_background background-color: $header_text +rounded(15px) +box_shadow(0 5px 10px $header_shadow)
    7. 7. CSS3 RULE EXPLOSION @import css3_helpers @import colors #header color: $header_background background-color: $header_text +rounded(15px) +box_shadow(0 5px 10px $header_shadow)
    8. 8. CSS3 RULE EXPLOSION @import css3_helpers @import colors #header color: $header_background background-color: $header_text +rounded(15px) +box_shadow(0 5px 10px $header_shadow)
    9. 9. CSS3 RULE EXPLOSION @import css3_helpers @import colors #header color: $header_background background-color: $header_text +rounded(15px) +box_shadow(0 5px 10px $header_shadow)
    10. 10. OPACITY & IE SUCKS filter: alpha(opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8;
    11. 11. OR IN SCSS TRADITIONAL FORMAT + MAGIC @import "css3_helpers"; @import "colors"; #header {   color: $header_background;   background-color: $header_text;   @include rounded(15px);   @include box_shadow(0 5px 10px $header_shadow); }
    12. 12. OR IN SCSS TRADITIONAL FORMAT + MAGIC @import "css3_helpers"; @import "colors"; #header {   color: $header_background;   background-color: $header_text;   @include rounded(15px);   @include box_shadow(0 5px 10px $header_shadow); }
    13. 13. OR IN SCSS TRADITIONAL FORMAT + MAGIC @import "css3_helpers"; @import "colors"; #header {   color: $header_background;   background-color: $header_text;   @include rounded(15px);   @include box_shadow(0 5px 10px $header_shadow); }
    14. 14. OR IN SCSS TRADITIONAL FORMAT + MAGIC @import "css3_helpers"; @import "colors"; #header {   color: $header_background;   background-color: $header_text;   @include rounded(15px);   @include box_shadow(0 5px 10px $header_shadow); }
    15. 15. RUBY • All of these examples use Ruby libraries. It’s not scary, and it’s easy to work with. • None of the examples require Ruby to actually run. The output is pure CSS. • You don’t care what language Word is written in do you?
    16. 16. MIXINS @mixin table-base {   th {     text-align: center;     font-weight: bold;   }   td, th {padding: 2px} } @mixin left($dist) {   float: left;   margin-left: $dist; } #data {   @include left(10px);   @include table-base; }
    17. 17. MIXINS @mixin table-base {   th {     text-align: center;     font-weight: bold;   }   td, th {padding: 2px} } @mixin left($dist) {   float: left;   margin-left: $dist; } #data {   @include left(10px);   @include table-base; }
    18. 18. MIXINS @mixin table-base {   th {     text-align: center;     font-weight: bold;   }   td, th {padding: 2px} } @mixin left($dist) {   float: left;   margin-left: $dist; } #data {   @include left(10px);   @include table-base; }
    19. 19. MIXINS @mixin table-base {   th {     text-align: center;     font-weight: bold;   }   td, th {padding: 2px} } @mixin left($dist) {   float: left;   margin-left: $dist; } #data {   @include left(10px);   @include table-base; }
    20. 20. DRY SELECTORS - NESTING table#data {   th {      font-weight: bold;     font-size: 1.2em;   }   td {      font-weight: normal;     font-size: 0.9em;     &:hover { background-color: #999; }   } }
    21. 21. DRY SELECTORS - NESTING table#data {   th {      font-weight: bold;     font-size: 1.2em;   }   td {      font-weight: normal;     font-size: 0.9em;     &:hover { background-color: #999; }   } }
    22. 22. DRY SELECTORS - NESTING table#data {   th {      font-weight: bold;     font-size: 1.2em;   }   td {      font-weight: normal;     font-size: 0.9em;     &:hover { background-color: #999; }   } }
    23. 23. #navbar { MATH   $navbar-width: 800px;   $items: 5;   $navbar-color: #ce4dd6;   width: $navbar-width;   border-bottom: 2px solid $navbar-color;   li {     float: left;     width: $navbar-width/$items - 10px;     background-color:       lighten($navbar-color, 20%);     &:hover {       background-color:         lighten($navbar-color, 10%);     }   } }
    24. 24. #navbar { MATH ith   $navbar-width: 800px; tW   $items: 5; ea s!   $navbar-color: #ce4dd6; Gr ent es rc o e   width: $navbar-width; G P   border-bottom: 2px solid $navbar-color;   li {     float: left;     width: $navbar-width/$items - 10px;     background-color:       lighten($navbar-color, 20%);     &:hover {       background-color:         lighten($navbar-color, 10%);     }   } }
    25. 25. #navbar { MATH ith   $navbar-width: 800px; tW   $items: 5; ea s!   $navbar-color: #ce4dd6; Gr ent es rc o e   width: $navbar-width; G P   border-bottom: 2px solid $navbar-color;   li { Au     float: left; to-     width: $navbar-width/$items - 10px; CM adj S t ust em yo     background-color: pla ur       lighten($navbar-color, 20%); tes     &:hover {       background-color:         lighten($navbar-color, 10%);     }   } }
    26. 26. LIBRARY CODE http://compass-style.org/docs/reference/compass/ http://compass-style.org/docs/reference/blueprint/
    27. 27. SEMANTIC CODE <div class="span-16 last"></div>
    28. 28. SEMANTIC CODE <div class="span-16 last"></div> WTF IS THAT?!?!
    29. 29. SEMANTIC CODE <div class="right_column"></div>
    30. 30. SEMANTIC CODE <div class="right_column"></div> Much better. But how to do the CSS?
    31. 31. SEMANTIC CODE .right_column {   @import span(16);   @import last; }
    32. 32. SEMANTIC CODE .right_column {   @import span(16);   @import last; } Nice and Semantic. Everything in it’s place
    33. 33. LINKS & SUCH http://www.sass-lang.org Only needed for Windows: http://rubyinstaller.org/

    ×