SlideShare a Scribd company logo
1 of 36
Download to read offline
SASS / SCSS / LESS
Variables, Math, Reusable Code, Happiness
WHAT’S WRONG WITH CSS
      And an easy way to fix it
REPEATED CODE (NOT DRY)
       #table th {
         /* ... */
       }


       #table td {
         /* ... */
       }

       #table td a {
         /* ... */
       }

       #table td a:hover {
         /* ... */
       }
FCIP SASS Talk
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;
 }
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);
}
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)
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)
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)
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)
OPACITY & IE SUCKS
filter: alpha(opacity=80);

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

opacity: .8;
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);
   }
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);
   }
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);
   }
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);
   }
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?
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;
}
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;
}
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;
}
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;
}
FCIP SASS Talk
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; }
     }
   }
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; }
     }
   }
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; }
     }
   }
FCIP SASS Talk
#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%);
    }
  }
}
#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%);
                     }
                   }
                 }
#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%);
                     }
                   }
                 }
LIBRARY CODE


http://compass-style.org/docs/reference/compass/
http://compass-style.org/docs/reference/blueprint/
SEMANTIC CODE
<div class="span-16 last"></div>
SEMANTIC CODE
<div class="span-16 last"></div>




       WTF IS THAT?!?!
SEMANTIC CODE
<div class="right_column"></div>
SEMANTIC CODE
<div class="right_column"></div>




        Much better.
   But how to do the CSS?
SEMANTIC CODE
  .right_column {
    @import span(16);
    @import last;
  }
SEMANTIC CODE
   .right_column {
     @import span(16);
     @import last;
   }



   Nice and Semantic.
  Everything in it’s place
LINKS & SUCH


 http://www.sass-lang.org



Only needed for Windows:
 http://rubyinstaller.org/

More Related Content

What's hot

Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compassdrywallbmb
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassClaudina Sarahe
 
Theme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copieTheme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copieRafaela Souza
 
Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationRaleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationDaniel Yuschick
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherIvano Malavolta
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü AdınaAdem Ilter
 

What's hot (14)

Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Finding your way with Sass+Compass
Finding your way with Sass+CompassFinding your way with Sass+Compass
Finding your way with Sass+Compass
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
 
Theme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copieTheme futura suicida não use como base e nem copie
Theme futura suicida não use como base e nem copie
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
 
Sass
SassSass
Sass
 
Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass PresentationRaleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass Presentation
 
Theme02
Theme02Theme02
Theme02
 
Jina Bolton
Jina BoltonJina Bolton
Jina Bolton
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
 
Theme03
Theme03Theme03
Theme03
 
CSS'in Gücü Adına
CSS'in Gücü AdınaCSS'in Gücü Adına
CSS'in Gücü Adına
 
This is a test
This is a testThis is a test
This is a test
 
Cracking for the Blue Team
Cracking for the Blue TeamCracking for the Blue Team
Cracking for the Blue Team
 

Viewers also liked

Viewers also liked (9)

Evaluating FNMI Students
Evaluating FNMI StudentsEvaluating FNMI Students
Evaluating FNMI Students
 
Earthquake in Chile
Earthquake in ChileEarthquake in Chile
Earthquake in Chile
 
Blondinen
BlondinenBlondinen
Blondinen
 
Quiz bratislava
Quiz  bratislavaQuiz  bratislava
Quiz bratislava
 
Gps slovak - english version
Gps slovak - english versionGps slovak - english version
Gps slovak - english version
 
Lethbridge educ3508 tech - powerpoint
Lethbridge   educ3508 tech - powerpointLethbridge   educ3508 tech - powerpoint
Lethbridge educ3508 tech - powerpoint
 
Handel
Handel Handel
Handel
 
Arctic
ArcticArctic
Arctic
 
Dance music
Dance musicDance music
Dance music
 

Similar to FCIP SASS Talk

Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with SassRob Friesel
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsKaelig Deloumeau-Prigent
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書拓樹 谷
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"bentleyhoke
 
Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSSBerit Hlubek
 
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - IntroducãoCurso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - IntroducãoLoiane Groner
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)emrox
 
Software programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesSoftware programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesDinu Suman
 
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)Dinis Correia
 
CSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie DustCSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie DustKyle Adams
 
Learn to Love CSS3 [English]
Learn to Love CSS3 [English]Learn to Love CSS3 [English]
Learn to Love CSS3 [English]ThemePartner
 
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandLearn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandThemePartner
 

Similar to FCIP SASS Talk (20)

Wrangling the CSS Beast with Sass
Wrangling the CSS Beast  with SassWrangling the CSS Beast  with Sass
Wrangling the CSS Beast with Sass
 
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive NewsMobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
Sass&compass
Sass&compassSass&compass
Sass&compass
 
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
 
Sass, Compass
Sass, CompassSass, Compass
Sass, Compass
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSS
 
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - IntroducãoCurso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
Software programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesSoftware programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS files
 
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)
 
Sencha Touch
Sencha TouchSencha Touch
Sencha Touch
 
CSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie DustCSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie Dust
 
Less & Sass
Less & SassLess & Sass
Less & Sass
 
Learn to Love CSS3 [English]
Learn to Love CSS3 [English]Learn to Love CSS3 [English]
Learn to Love CSS3 [English]
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Sass
SassSass
Sass
 
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandLearn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
 

FCIP SASS Talk

  • 1. SASS / SCSS / LESS Variables, Math, Reusable Code, Happiness
  • 2. WHAT’S WRONG WITH CSS And an easy way to fix it
  • 3. REPEATED CODE (NOT DRY) #table th { /* ... */ } #table td { /* ... */ } #table td a { /* ... */ } #table td a:hover { /* ... */ }
  • 5. 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; }
  • 6. 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); }
  • 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. 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. 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. 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)
  • 11. OPACITY & IE SUCKS filter: alpha(opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: .8;
  • 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. 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. 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. 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); }
  • 16. 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?
  • 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. 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. 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. 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; }
  • 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. 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; }   } }
  • 24. 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; }   } }
  • 26. #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%);     }   } }
  • 27. #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%);     }   } }
  • 28. #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%);     }   } }
  • 33. SEMANTIC CODE <div class="right_column"></div> Much better. But how to do the CSS?
  • 34. SEMANTIC CODE .right_column {   @import span(16);   @import last; }
  • 35. SEMANTIC CODE .right_column {   @import span(16);   @import last; } Nice and Semantic. Everything in it’s place
  • 36. LINKS & SUCH http://www.sass-lang.org Only needed for Windows: http://rubyinstaller.org/

Editor's Notes