SlideShare a Scribd company logo
1 of 117
Wrangling the CSS
 Beast with Sass
     by Rob Friesel
Who is this guy?
Who is this guy?
   Sr. User Interface Developer
   at Dealer.com Websystems
   out there on the web:
      @founddrama
      blog.founddrama.net
      github.com/founddrama
Sass: what the heck is that?
Sass: what the heck is that?
“Syntactically Awesome Style Sheets” - sass-lang.com
Sass: what the heck is that?
“Syntactically Awesome Style Sheets” - sass-lang.com
created by Hampton Catlin
   Nathan Weizenbaum, primary designer
   & lead developer
   Chris Eppstein, core contributor &
   creator of Compass
Sass: what the heck is that?
“Syntactically Awesome Style Sheets” - sass-lang.com
Sass/SCSS is a CSS meta-language written in Ruby
   a super-set of CSS
   all CSS is valid Sass
   Sass/SCSS compiles to CSS
In other words: it fixes CSS
In other words: it fixes CSS


“But CSS is perfect, right?
What could you possibly
want to add?”
CSS problems
CSS problems

repetitive
CSS problems

repetitive
repetitive
CSS problems

repetitive
repetitive
not expressive
CSS problems

repetitive
repetitive
not expressive
no variables
CSS problems

repetitive
repetitive
not expressive
no variables
no functions, no calculations, no inheritance, etc.
CSS3 to the rescue?
CSS3 to the rescue?

Not really
CSS3 to the rescue?

Not really
   some new properties
CSS3 to the rescue?

Not really
   some new properties
   some new values
CSS3 to the rescue?

Not really
   some new properties
   some new values
   no new syntax
CSS3 Sass to the rescue
What Sass offers

variables              conditionals
selector inheritance   loops
mixins                 syntax validation
calculations           and more
Getting Sass
Getting Sass

         $
gem
install
sass
                              * requires Ruby




download source/contribute:
   github.com/nex3/sass
“OK, I’ve got it.
 Now what?”
baby steps
CSS is Sass
   and Sass (SCSS) compiles to CSS
baby steps
CSS is Sass
   and Sass (SCSS) compiles to CSS




       $
mv
my.css
my.scss
       $
sass
my.scss:my.css
10 things to love
   about Sass
     * inspired by blog.founddrama.net/2010/08/10-things-i-love-about-sass/
       ** play along at home: https://github.com/founddrama/vt-code-camp
#1 : Variables
#1 : Variables
/**

*
Why
find/replace
in
CSS

*
files
doesn't
work:

*/
h1#masthead
{
  color:
#f00;
}
.post‐hd
{
  color:
#ff0000;
}
a.outbound‐link
{
  color:
red;
}
.sidebar
p
{
  color:
rgba(255,
0,
0,
1);
}
#1 : Variables
/**                            //
Sass
to
the
rescue

*
Why
find/replace
in
CSS

*
files
doesn't
work:         $highlight:
#ff0000;

*/
h1#masthead
{                  h1#masthead
{
  color:
#f00;                   color:
$highlight;
}                              }
.post‐hd
{                     .post‐hd
{
  color:
#ff0000;                color:
$highlight;
}                              }
a.outbound‐link
{              a.outbound‐link
{
  color:
red;                    color:
$highlight;
}                              }
.sidebar
p
{                   .sidebar
p
{
  color:
rgba(255,
0,
0,
1);     color:
$highlight;
}                              }
#1 : Variables
#1 : Variables
#1 : Variables
    $theme_accent:
#771100;
    $theme_bg:
#222222;
    

    #container
{
    

h1,
h2,
h3
{
color:
$theme_accent;
}
    

.post
{
    



$accent_border:
1px
$theme_accent;
    



$dark_border:
1px
$theme_bg;

    



border:
{
    





top:
$accent_border;
    





left:
$accent_border;
    





bottom:
$dark_border;
    





right:
$dark_border;
    



}
    

}
    }
#2 : Nesting (selectors)
#2 : Nesting (selectors)
.post
code,
.post
pre,
.post
.source
{
  font‐family:
"Inconsolata",
Courier,
monospace;
}
#2 : Nesting (selectors)
.post
code,
.post
pre,
.post
.source
{
  font‐family:
"Inconsolata",
Courier,
monospace;
}




.post
{
  code,
pre,
.source
{
    font‐family:
"Inconsolata",
Courier,
monospace;
  }
}
#3 : Nesting (properties)
#3 : Nesting (properties)
.styled‐text
{
  font‐family:
"Georgia",
Times,
serif;
  font‐style:
oblique;
  font‐size:
2em;
}
#3 : Nesting (properties)
.styled‐text
{
  font‐family:
"Georgia",
Times,
serif;
  font‐style:
oblique;
  font‐size:
2em;
}




.styled‐text
{
  font:
{
    family:
"Georgia",
Times,
serif;
    style:
oblique;
    size:
2em;
  }
}
#4 : Mixins
#4 : Mixins
    @mixin
rounded‐top($radius:
10px)
{
      $side:
top;
      ‐moz‐border‐radius:
{
        #{$side}left:
$radius;
        #{$side}right:
$radius;
      }
      ‐webkit‐border‐#{$side}:
{
        left‐radius:
$radius;
        right‐radius:
$radius;
      }
      border‐#{$side}:
{
        left‐radius:
$radius;
        right‐radius:
$radius;
      }
    }

    .section‐hd
{
@include
rounded‐top;
}
    .tab
{
@include
rounded‐top(4px);
}
#4 : Mixins
    @mixin
rounded‐top($radius:
10px)
{
    .section‐hd
{
      $side:
top;
    

‐moz‐border‐radius‐topleft:
10px;
      ‐moz‐border‐radius:
{
    

‐moz‐border‐radius‐topright:
10px;
         #{$side}left:
$radius;
    

‐webkit‐border‐top‐left‐radius:
10px;
         #{$side}right:
$radius;
    

‐webkit‐border‐top‐right‐radius:
10px;
      }
    

border‐top‐left‐radius:
10px;
      ‐webkit‐border‐#{$side}:
{
    

border‐top‐right‐radius:
10px;
    }    left‐radius:
$radius;
         right‐radius:
$radius;
      }
      border‐#{$side}:
{
    .tab
{
         left‐radius:
$radius;
    

‐moz‐border‐radius‐topleft:
4px;
         right‐radius:
$radius;
    

‐moz‐border‐radius‐topright:
4px;
      }
    

‐webkit‐border‐top‐left‐radius:
4px;
    }
    

‐webkit‐border‐top‐right‐radius:
4px;
    

border‐top‐left‐radius:
4px;
    .section‐hd
{
@include
rounded‐top;
}
    

border‐top‐right‐radius:
4px;
    .tab
{
@include
rounded‐top(4px);
}
    }
#4 : Mixins
@mixin
rounded‐top($radius:
10px)
{     .section‐hd
{
  $side:
top;                           

‐moz‐border‐radius‐topleft:
10px;
  ‐moz‐border‐radius:
{                 

‐moz‐border‐radius‐topright:
10px;
    #{$side}left:
$radius;              

‐webkit‐border‐top‐left‐radius:
10px;
    #{$side}right:
$radius;             

‐webkit‐border‐top‐right‐radius:
10px;
  }                                     

border‐top‐left‐radius:
10px;
  ‐webkit‐border‐#{$side}:
{            

border‐top‐right‐radius:
10px;
    left‐radius:
$radius;               }
    right‐radius:
$radius;
  }
  border‐#{$side}:
{                    .tab
{
    left‐radius:
$radius;               

‐moz‐border‐radius‐topleft:
4px;
    right‐radius:
$radius;              

‐moz‐border‐radius‐topright:
4px;
  }                                     

‐webkit‐border‐top‐left‐radius:
4px;
}                                       

‐webkit‐border‐top‐right‐radius:
4px;
                                        

border‐top‐left‐radius:
4px;
.section‐hd
{
@include
rounded‐top;
}   

border‐top‐right‐radius:
4px;
.tab
{
@include
rounded‐top(4px);
}     }
#5 : Selector Inheritance
#5 : Selector Inheritance
      .blue‐box
{
      
 width:
100px;
      
 height:
100px;
      
 padding:
25px;
      
 background:
#00f;
      

      
 &.wide
{
      
 
 width:
200px;
      
 }
      }

      .bordered‐blue‐box
{
      
 @extend
.blue‐box;
      
 border:
1px
solid
#ccc;
      }
#5 : Selector Inheritance
      .blue‐box
{
      .blue‐box,
.bordered‐blue‐box
{
      
 width:
100px;
          width:
100px;
      
 height:
100px;
          height:
100px;
      
 padding:
25px;
          padding:
25px;
      
 background:
#00f;
          background:
#00f;
      

      }
      
 &.wide
{
      
 
 width:
200px;
      .blue‐box.wide,
      
 }
      .wide.bordered‐blue‐box
{
      } width:
200px;
      }
      .bordered‐blue‐box
{
      
 @extend
.blue‐box;
      .bordered‐blue‐box
{
      
 border:
1px
solid
#ccc;
          border:
1px
solid
#ccc;
      }
#5 : Selector Inheritance
.blue‐box
{                 .blue‐box,
.bordered‐blue‐box
{

 width:
100px;               width:
100px;

 height:
100px;              height:
100px;

 padding:
25px;              padding:
25px;

 background:
#00f;           background:
#00f;

                           }

 &.wide
{

 
 width:
200px;           .blue‐box.wide,

 }                         .wide.bordered‐blue‐box
{
}                             width:
200px;
                            }
.bordered‐blue‐box
{

 @extend
.blue‐box;        .bordered‐blue‐box
{

 border:
1px
solid
#ccc;     border:
1px
solid
#ccc;
}                           }
#6 : SassScript
#6 : SassScript
arithmetic
#6 : SassScript
arithmetic
string interpolation
with #{}
#6 : SassScript
arithmetic
string interpolation
with #{}

simple logic
   equality operators,
   relational operators
#6 : SassScript
arithmetic                control directives
string interpolation         @if, @else
if, and
                             @else
with #{}
                             @for, @each, and
                             @while
simple logic
   equality operators,
   relational operators
#6 : SassScript
arithmetic                control directives
string interpolation         @if, @else
if, and
                             @else
with #{}
                             @for, @each, and
                             @while
simple logic
   equality operators,    color operations
   relational operators
#6 : SassScript
#6 : SassScript
#6 : SassScript

article
{
  $base_font_size:
12px;
  $base_line_height:
$base_font_size
*
1.5;

    font‐size:
$base_font_size;
    line‐height:
$base_line_height;

    //
simple
math
    h1
{
font‐size:
$base_font_size
+
($base_line_height
*
2);
}
    h2
{
font‐size:
$base_font_size
+
4px;
}
}
#6 : SassScript
#6 : SassScript
#6 : SassScript

   //
looping
with
conditional
logic
   @for
$i
from
1
through
10
{
     $flickr_pink:
#ff1c92;
     #flickr_badge_image#{$i}
{
       @if
$i
%
2
==
0
{
         color:
$flickr_pink;
       }
@else
{
         color:
desaturate($flickr_pink,
15%);
       }
     }
   }
#7 : @import done right
#7 : @import done right
/**

*
CSS
@include
directive

*
‐
good
in
theory
but...

*


*
‐
generates
an
extra
http

*


request
for
each

*


*
‐
browser
cannot
execute

*


those
downloads
in

*


parallel

*/
@import
url("reset.css");
@import
url("other.css");
@import
url("legacy.css");
#7 : @import done right
/**                            /**

*
CSS
@include
directive      
*
SCSS
@import
directive

*
‐
good
in
theory
but...     
*/

*


*
‐
generates
an
extra
http   //
compiles
'_reset.scss'

*


request
for
each          //
partial
into
final
CSS

*
                            @import
"reset";

*
‐
browser
cannot
execute

*


those
downloads
in        //
compiles
'other.scss'
into

*


parallel                  //
final
CSS

*/                            @import
"other.scss";
@import
url("reset.css");
@import
url("other.css");      //
honors
'the
old
way'
@import
url("legacy.css");     @import
"legacy.css";
#8 : Built-in minification
#8 : Built-in minification


$ sass
‐‐style
expanded
style.scss:style.css
#8 : Built-in minification


$
#8 : Built-in minification
#8 : Built-in minification


$ sass
‐‐style
nested
style.scss:style.css
#8 : Built-in minification


$
#8 : Built-in minification
#8 : Built-in minification


$ sass
‐‐style
compact
style.scss:style.css
#8 : Built-in minification


$
#8 : Built-in minification
#8 : Built-in minification


$ sass
‐‐style
compressed
style.scss:style.css
#9 : Comments (Line & Loud)
#9 : Comments (Line & Loud)
/*!
"Loud
comments"

*
are
just
like
regular
ones

*/
.some‐col‐class
{
  /*
forced
line
comment
*/
  width:
160px;
  font‐size:
2em;
}
#9 : Comments (Line & Loud)
/*!
"Loud
comments"             /*!
"Loud
comment"

*
are
just
like
regular
ones   
*
e.g.,
for
license
text

*/                             
*/
.some‐col‐class
{               .some‐col‐class
{
  /*
forced
line
comment
*/       //
real
line
comment
  width:
160px;                   width:
160px;
  font‐size:
2em;                 font‐size:
2em;
}                               }
#10 : Validation
#10 : Validation

catch breaking errors and fail loudly
#10 : Validation

catch breaking errors and fail loudly
   print validation errors to the console at compile time
#10 : Validation

catch breaking errors and fail loudly
   print validation errors to the console at compile time
   print validation errors to the page mark-up
#10 : Validation

catch breaking errors and fail loudly
   print validation errors to the console at compile time
   print validation errors to the page mark-up
doesn't catch everything, but catches the important things
BONUS: Compass
BONUS: Compass
an open-source CSS authoring framework
   compass-style.org
BONUS: Compass
an open-source CSS authoring framework
   compass-style.org
provides mixins, functions, helpers, and other utilities
BONUS: Compass
an open-source CSS authoring framework
   compass-style.org
provides mixins, functions, helpers, and other utilities
   spriting
BONUS: Compass
an open-source CSS authoring framework
   compass-style.org
provides mixins, functions, helpers, and other utilities
   spriting
   image URLs
BONUS: Compass
an open-source CSS authoring framework
   compass-style.org
provides mixins, functions, helpers, and other utilities
   spriting
   image URLs
   CSS3
BONUS: Compass
an open-source CSS authoring framework
   compass-style.org
provides mixins, functions, helpers, and other utilities
   spriting
   image URLs
   CSS3
"But what about..."
(addressing the bosses and other nay-sayers)
"Isn't it a different syntax?"
"Isn't it a different syntax?"


SHORT ANSWER: "No."
  (weren't you paying attention?)
"Isn't it a different syntax?"
"Isn't it adding a step?"
"Isn't it adding a step?"

technically yes but...
"Isn't it adding a step?"

technically yes but...
...shouldn't you be minifying and concatenating your CSS
anyway?
"Isn't it adding a step?"

 technically yes but...
 ...shouldn't you be minifying and concatenating your CSS
 anyway?
 for development:

$
sass
‐‐watch
src/sass:deploy/css
"Isn't it adding a step?"
"Why not just use OOCSS?"
"Why not just use OOCSS?"
                   * the technique, not the framework
"Why not just use OOCSS?"
                                      * the technique, not the framework




Sass won't guarantee great compiled CSS
"Why not just use OOCSS?"
                                      * the technique, not the framework




Sass won't guarantee great compiled CSS
   break bad habits
"Why not just use OOCSS?"
                                      * the technique, not the framework




Sass won't guarantee great compiled CSS
   break bad habits
   avoid deeply nested Sass
"Why not just use OOCSS?"
                                          * the technique, not the framework




Sass won't guarantee great compiled CSS
   break bad habits
   avoid deeply nested Sass
OOCSS lessons still apply
            (just apply them via Sass!)
"Why not just use OOCSS?"
"Why not use [insert framework]?"
"Why not use [insert framework]?"



Nothing wrong with using a framework
   Compass has built-in support for Blueprint grids
"Why not use [insert framework]?"
"Won't my compiled CSS still be a mess?"
"Won't my compiled CSS still be a mess?"

    SHORT ANSWER: "Maybe?"
"Won't my compiled CSS still be a mess?"

    SHORT ANSWER: "Maybe?"
      bad habits are still bad habits
"Won't my compiled CSS still be a mess?"

    SHORT ANSWER: "Maybe?"
      bad habits are still bad habits
      (compiled) CSS is still CSS
"Won't my compiled CSS still be a mess?"

    SHORT ANSWER: "Maybe?"
      bad habits are still bad habits
      (compiled) CSS is still CSS
      "classitis" is still "classitis", and
      "selector cancer" is still "selector cancer"
"Won't my compiled CSS still be a mess?"
What are you waiting for?
Thank you.
Thank you.

More Related Content

What's hot

Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASSJon Dean
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingJames Cryer
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)Folio3 Software
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheetschriseppstein
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With LessDavid Engel
 
CSS preprocessor: why and how
CSS preprocessor: why and howCSS preprocessor: why and how
CSS preprocessor: why and howmirahman
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassClaudina Sarahe
 
ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019
ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019
ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019European Collaboration Summit
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 

What's hot (20)

Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
Introduction to SASS
Introduction to SASSIntroduction to SASS
Introduction to SASS
 
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y tryingCSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
 
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventionsHTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
 
SASS - CSS with Superpower
SASS - CSS with SuperpowerSASS - CSS with Superpower
SASS - CSS with Superpower
 
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
 
Introduction to sass
Introduction to sassIntroduction to sass
Introduction to sass
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
Css to-scss
Css to-scssCss to-scss
Css to-scss
 
Less vs sass
Less vs sassLess vs sass
Less vs sass
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With Less
 
CSS preprocessor: why and how
CSS preprocessor: why and howCSS preprocessor: why and how
CSS preprocessor: why and how
 
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and CompassBringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
 
Compass
CompassCompass
Compass
 
Css 3
Css 3Css 3
Css 3
 
Css 3
Css 3Css 3
Css 3
 
Sass_Cubet seminar
Sass_Cubet seminarSass_Cubet seminar
Sass_Cubet seminar
 
CSS3
CSS3CSS3
CSS3
 
ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019
ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019
ECS19 - Chris Kent - List Formatting in Office 365 and SharePoint 2019
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 

Similar to 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 NewsKaelig Deloumeau-Prigent
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & CompassAndreas Dantz
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書拓樹 谷
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Adam Darowski
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.Gabriel Neutzling
 
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
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & CompassRob Davarnia
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Startededgincvg
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSSSayanee Basu
 
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
 
Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSSBerit Hlubek
 
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
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 

Similar to Wrangling the CSS Beast with Sass (20)

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
 
FCIP SASS Talk
FCIP SASS TalkFCIP SASS Talk
FCIP SASS Talk
 
Work and play with SASS & Compass
Work and play with SASS & CompassWork and play with SASS & Compass
Work and play with SASS & Compass
 
Sass&compass
Sass&compassSass&compass
Sass&compass
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書CSSプリプロセッサの取扱説明書
CSSプリプロセッサの取扱説明書
 
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
 
Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
 
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
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Started
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
 
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)
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Save time by using SASS/SCSS
Save time by using SASS/SCSSSave time by using SASS/SCSS
Save time by using SASS/SCSS
 
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"
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 

Recently uploaded

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsZilliz
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Scott Andery
 

Recently uploaded (20)

2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
Enhancing User Experience - Exploring the Latest Features of Tallyman Axis Lo...
 

Wrangling the CSS Beast with Sass

  • 1. Wrangling the CSS Beast with Sass by Rob Friesel
  • 2. Who is this guy?
  • 3. Who is this guy? Sr. User Interface Developer at Dealer.com Websystems out there on the web: @founddrama blog.founddrama.net github.com/founddrama
  • 4. Sass: what the heck is that?
  • 5. Sass: what the heck is that? “Syntactically Awesome Style Sheets” - sass-lang.com
  • 6. Sass: what the heck is that? “Syntactically Awesome Style Sheets” - sass-lang.com created by Hampton Catlin Nathan Weizenbaum, primary designer & lead developer Chris Eppstein, core contributor & creator of Compass
  • 7. Sass: what the heck is that? “Syntactically Awesome Style Sheets” - sass-lang.com Sass/SCSS is a CSS meta-language written in Ruby a super-set of CSS all CSS is valid Sass Sass/SCSS compiles to CSS
  • 8. In other words: it fixes CSS
  • 9. In other words: it fixes CSS “But CSS is perfect, right? What could you possibly want to add?”
  • 15. CSS problems repetitive repetitive not expressive no variables no functions, no calculations, no inheritance, etc.
  • 16. CSS3 to the rescue?
  • 17. CSS3 to the rescue? Not really
  • 18. CSS3 to the rescue? Not really some new properties
  • 19. CSS3 to the rescue? Not really some new properties some new values
  • 20. CSS3 to the rescue? Not really some new properties some new values no new syntax
  • 21. CSS3 Sass to the rescue
  • 22. What Sass offers variables conditionals selector inheritance loops mixins syntax validation calculations and more
  • 24. Getting Sass $
gem
install
sass * requires Ruby download source/contribute: github.com/nex3/sass
  • 25. “OK, I’ve got it. Now what?”
  • 26. baby steps CSS is Sass and Sass (SCSS) compiles to CSS
  • 27. baby steps CSS is Sass and Sass (SCSS) compiles to CSS $
mv
my.css
my.scss $
sass
my.scss:my.css
  • 28. 10 things to love about Sass * inspired by blog.founddrama.net/2010/08/10-things-i-love-about-sass/ ** play along at home: https://github.com/founddrama/vt-code-camp
  • 30. #1 : Variables /** 
*
Why
find/replace
in
CSS 
*
files
doesn't
work: 
*/ h1#masthead
{ color:
#f00; } .post‐hd
{ color:
#ff0000; } a.outbound‐link
{ color:
red; } .sidebar
p
{ color:
rgba(255,
0,
0,
1); }
  • 31. #1 : Variables /** //
Sass
to
the
rescue 
*
Why
find/replace
in
CSS 
*
files
doesn't
work: $highlight:
#ff0000; 
*/ h1#masthead
{ h1#masthead
{ color:
#f00; color:
$highlight; } } .post‐hd
{ .post‐hd
{ color:
#ff0000; color:
$highlight; } } a.outbound‐link
{ a.outbound‐link
{ color:
red; color:
$highlight; } } .sidebar
p
{ .sidebar
p
{ color:
rgba(255,
0,
0,
1); color:
$highlight; } }
  • 34. #1 : Variables $theme_accent:
#771100; $theme_bg:
#222222; 
 #container
{ 

h1,
h2,
h3
{
color:
$theme_accent;
} 

.post
{ 



$accent_border:
1px
$theme_accent; 



$dark_border:
1px
$theme_bg; 



border:
{ 





top:
$accent_border; 





left:
$accent_border; 





bottom:
$dark_border; 





right:
$dark_border; 



} 

} }
  • 35. #2 : Nesting (selectors)
  • 36. #2 : Nesting (selectors) .post
code, .post
pre, .post
.source
{ font‐family:
"Inconsolata",
Courier,
monospace; }
  • 37. #2 : Nesting (selectors) .post
code, .post
pre, .post
.source
{ font‐family:
"Inconsolata",
Courier,
monospace; } .post
{ code,
pre,
.source
{ font‐family:
"Inconsolata",
Courier,
monospace; } }
  • 38. #3 : Nesting (properties)
  • 39. #3 : Nesting (properties) .styled‐text
{ font‐family:
"Georgia",
Times,
serif; font‐style:
oblique; font‐size:
2em; }
  • 40. #3 : Nesting (properties) .styled‐text
{ font‐family:
"Georgia",
Times,
serif; font‐style:
oblique; font‐size:
2em; } .styled‐text
{ font:
{ family:
"Georgia",
Times,
serif; style:
oblique; size:
2em; } }
  • 42. #4 : Mixins @mixin
rounded‐top($radius:
10px)
{ $side:
top; ‐moz‐border‐radius:
{ #{$side}left:
$radius; #{$side}right:
$radius; } ‐webkit‐border‐#{$side}:
{ left‐radius:
$radius; right‐radius:
$radius; } border‐#{$side}:
{ left‐radius:
$radius; right‐radius:
$radius; } } .section‐hd
{
@include
rounded‐top;
} .tab
{
@include
rounded‐top(4px);
}
  • 43. #4 : Mixins @mixin
rounded‐top($radius:
10px)
{ .section‐hd
{ $side:
top; 

‐moz‐border‐radius‐topleft:
10px; ‐moz‐border‐radius:
{ 

‐moz‐border‐radius‐topright:
10px; #{$side}left:
$radius; 

‐webkit‐border‐top‐left‐radius:
10px; #{$side}right:
$radius; 

‐webkit‐border‐top‐right‐radius:
10px; } 

border‐top‐left‐radius:
10px; ‐webkit‐border‐#{$side}:
{ 

border‐top‐right‐radius:
10px; } left‐radius:
$radius; right‐radius:
$radius; } border‐#{$side}:
{ .tab
{ left‐radius:
$radius; 

‐moz‐border‐radius‐topleft:
4px; right‐radius:
$radius; 

‐moz‐border‐radius‐topright:
4px; } 

‐webkit‐border‐top‐left‐radius:
4px; } 

‐webkit‐border‐top‐right‐radius:
4px; 

border‐top‐left‐radius:
4px; .section‐hd
{
@include
rounded‐top;
} 

border‐top‐right‐radius:
4px; .tab
{
@include
rounded‐top(4px);
} }
  • 44. #4 : Mixins @mixin
rounded‐top($radius:
10px)
{ .section‐hd
{ $side:
top; 

‐moz‐border‐radius‐topleft:
10px; ‐moz‐border‐radius:
{ 

‐moz‐border‐radius‐topright:
10px; #{$side}left:
$radius; 

‐webkit‐border‐top‐left‐radius:
10px; #{$side}right:
$radius; 

‐webkit‐border‐top‐right‐radius:
10px; } 

border‐top‐left‐radius:
10px; ‐webkit‐border‐#{$side}:
{ 

border‐top‐right‐radius:
10px; left‐radius:
$radius; } right‐radius:
$radius; } border‐#{$side}:
{ .tab
{ left‐radius:
$radius; 

‐moz‐border‐radius‐topleft:
4px; right‐radius:
$radius; 

‐moz‐border‐radius‐topright:
4px; } 

‐webkit‐border‐top‐left‐radius:
4px; } 

‐webkit‐border‐top‐right‐radius:
4px; 

border‐top‐left‐radius:
4px; .section‐hd
{
@include
rounded‐top;
} 

border‐top‐right‐radius:
4px; .tab
{
@include
rounded‐top(4px);
} }
  • 45. #5 : Selector Inheritance
  • 46. #5 : Selector Inheritance .blue‐box
{ 
 width:
100px; 
 height:
100px; 
 padding:
25px; 
 background:
#00f; 
 
 &.wide
{ 
 
 width:
200px; 
 } } .bordered‐blue‐box
{ 
 @extend
.blue‐box; 
 border:
1px
solid
#ccc; }
  • 47. #5 : Selector Inheritance .blue‐box
{ .blue‐box,
.bordered‐blue‐box
{ 
 width:
100px; width:
100px; 
 height:
100px; height:
100px; 
 padding:
25px; padding:
25px; 
 background:
#00f; background:
#00f; 
 } 
 &.wide
{ 
 
 width:
200px; .blue‐box.wide, 
 } .wide.bordered‐blue‐box
{ } width:
200px; } .bordered‐blue‐box
{ 
 @extend
.blue‐box; .bordered‐blue‐box
{ 
 border:
1px
solid
#ccc; border:
1px
solid
#ccc; }
  • 48. #5 : Selector Inheritance .blue‐box
{ .blue‐box,
.bordered‐blue‐box
{ 
 width:
100px; width:
100px; 
 height:
100px; height:
100px; 
 padding:
25px; padding:
25px; 
 background:
#00f; background:
#00f; 
 } 
 &.wide
{ 
 
 width:
200px; .blue‐box.wide, 
 } .wide.bordered‐blue‐box
{ } width:
200px; } .bordered‐blue‐box
{ 
 @extend
.blue‐box; .bordered‐blue‐box
{ 
 border:
1px
solid
#ccc; border:
1px
solid
#ccc; } }
  • 51. #6 : SassScript arithmetic string interpolation with #{}
  • 52. #6 : SassScript arithmetic string interpolation with #{} simple logic equality operators, relational operators
  • 53. #6 : SassScript arithmetic control directives string interpolation @if, @else
if, and @else with #{} @for, @each, and @while simple logic equality operators, relational operators
  • 54. #6 : SassScript arithmetic control directives string interpolation @if, @else
if, and @else with #{} @for, @each, and @while simple logic equality operators, color operations relational operators
  • 57. #6 : SassScript article
{ $base_font_size:
12px; $base_line_height:
$base_font_size
*
1.5; font‐size:
$base_font_size; line‐height:
$base_line_height; //
simple
math h1
{
font‐size:
$base_font_size
+
($base_line_height
*
2);
} h2
{
font‐size:
$base_font_size
+
4px;
} }
  • 60. #6 : SassScript //
looping
with
conditional
logic @for
$i
from
1
through
10
{ $flickr_pink:
#ff1c92; #flickr_badge_image#{$i}
{ @if
$i
%
2
==
0
{ color:
$flickr_pink; }
@else
{ color:
desaturate($flickr_pink,
15%); } } }
  • 61. #7 : @import done right
  • 62. #7 : @import done right /** 
*
CSS
@include
directive 
*
‐
good
in
theory
but... 
*
 
*
‐
generates
an
extra
http 
*


request
for
each 
*
 
*
‐
browser
cannot
execute 
*


those
downloads
in 
*


parallel 
*/ @import
url("reset.css"); @import
url("other.css"); @import
url("legacy.css");
  • 63. #7 : @import done right /** /** 
*
CSS
@include
directive 
*
SCSS
@import
directive 
*
‐
good
in
theory
but... 
*/ 
*
 
*
‐
generates
an
extra
http //
compiles
'_reset.scss' 
*


request
for
each //
partial
into
final
CSS 
*
 @import
"reset"; 
*
‐
browser
cannot
execute 
*


those
downloads
in //
compiles
'other.scss'
into 
*


parallel //
final
CSS 
*/ @import
"other.scss"; @import
url("reset.css"); @import
url("other.css"); //
honors
'the
old
way' @import
url("legacy.css"); @import
"legacy.css";
  • 64. #8 : Built-in minification
  • 65. #8 : Built-in minification $ sass
‐‐style
expanded
style.scss:style.css
  • 66. #8 : Built-in minification $
  • 67. #8 : Built-in minification
  • 68. #8 : Built-in minification $ sass
‐‐style
nested
style.scss:style.css
  • 69. #8 : Built-in minification $
  • 70. #8 : Built-in minification
  • 71. #8 : Built-in minification $ sass
‐‐style
compact
style.scss:style.css
  • 72. #8 : Built-in minification $
  • 73. #8 : Built-in minification
  • 74. #8 : Built-in minification $ sass
‐‐style
compressed
style.scss:style.css
  • 75. #9 : Comments (Line & Loud)
  • 76. #9 : Comments (Line & Loud) /*!
"Loud
comments" 
*
are
just
like
regular
ones 
*/ .some‐col‐class
{ /*
forced
line
comment
*/ width:
160px; font‐size:
2em; }
  • 77. #9 : Comments (Line & Loud) /*!
"Loud
comments" /*!
"Loud
comment" 
*
are
just
like
regular
ones 
*
e.g.,
for
license
text 
*/ 
*/ .some‐col‐class
{ .some‐col‐class
{ /*
forced
line
comment
*/ //
real
line
comment width:
160px; width:
160px; font‐size:
2em; font‐size:
2em; } }
  • 79. #10 : Validation catch breaking errors and fail loudly
  • 80. #10 : Validation catch breaking errors and fail loudly print validation errors to the console at compile time
  • 81. #10 : Validation catch breaking errors and fail loudly print validation errors to the console at compile time print validation errors to the page mark-up
  • 82. #10 : Validation catch breaking errors and fail loudly print validation errors to the console at compile time print validation errors to the page mark-up doesn't catch everything, but catches the important things
  • 84. BONUS: Compass an open-source CSS authoring framework compass-style.org
  • 85. BONUS: Compass an open-source CSS authoring framework compass-style.org provides mixins, functions, helpers, and other utilities
  • 86. BONUS: Compass an open-source CSS authoring framework compass-style.org provides mixins, functions, helpers, and other utilities spriting
  • 87. BONUS: Compass an open-source CSS authoring framework compass-style.org provides mixins, functions, helpers, and other utilities spriting image URLs
  • 88. BONUS: Compass an open-source CSS authoring framework compass-style.org provides mixins, functions, helpers, and other utilities spriting image URLs CSS3
  • 89. BONUS: Compass an open-source CSS authoring framework compass-style.org provides mixins, functions, helpers, and other utilities spriting image URLs CSS3
  • 90. "But what about..." (addressing the bosses and other nay-sayers)
  • 91. "Isn't it a different syntax?"
  • 92. "Isn't it a different syntax?" SHORT ANSWER: "No." (weren't you paying attention?)
  • 93. "Isn't it a different syntax?"
  • 94. "Isn't it adding a step?"
  • 95. "Isn't it adding a step?" technically yes but...
  • 96. "Isn't it adding a step?" technically yes but... ...shouldn't you be minifying and concatenating your CSS anyway?
  • 97. "Isn't it adding a step?" technically yes but... ...shouldn't you be minifying and concatenating your CSS anyway? for development: $
sass
‐‐watch
src/sass:deploy/css
  • 98. "Isn't it adding a step?"
  • 99. "Why not just use OOCSS?"
  • 100. "Why not just use OOCSS?" * the technique, not the framework
  • 101. "Why not just use OOCSS?" * the technique, not the framework Sass won't guarantee great compiled CSS
  • 102. "Why not just use OOCSS?" * the technique, not the framework Sass won't guarantee great compiled CSS break bad habits
  • 103. "Why not just use OOCSS?" * the technique, not the framework Sass won't guarantee great compiled CSS break bad habits avoid deeply nested Sass
  • 104. "Why not just use OOCSS?" * the technique, not the framework Sass won't guarantee great compiled CSS break bad habits avoid deeply nested Sass OOCSS lessons still apply (just apply them via Sass!)
  • 105. "Why not just use OOCSS?"
  • 106. "Why not use [insert framework]?"
  • 107. "Why not use [insert framework]?" Nothing wrong with using a framework Compass has built-in support for Blueprint grids
  • 108. "Why not use [insert framework]?"
  • 109. "Won't my compiled CSS still be a mess?"
  • 110. "Won't my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?"
  • 111. "Won't my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits
  • 112. "Won't my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits (compiled) CSS is still CSS
  • 113. "Won't my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits (compiled) CSS is still CSS "classitis" is still "classitis", and "selector cancer" is still "selector cancer"
  • 114. "Won't my compiled CSS still be a mess?"
  • 115. What are you waiting for?

Editor's Notes

  1. \n
  2. - other claim to fame: a reviewer for Fogus/Houser "Joy of Clojure"\n
  3. - other claim to fame: a reviewer for Fogus/Houser "Joy of Clojure"\n
  4. - ...and numerous others (including Eric Meyer)\n
  5. - ...and numerous others (including Eric Meyer)\n
  6. - ...and numerous others (including Eric Meyer)\n
  7. SIDE NOTE - mention "throughout this talk, when I say Sass, I mean... / If I say 'Sass syntax' I'm really talking about SCSS... / never Python-inspired, whitespace-sensitive Sass syntax..."\n
  8. \n
  9. \n
  10. - repetitive = you wind up copy/pasting a lot\n- repetitive = (not just joking) : parts of individual declarations can get repetitive (e.g., properties like `font-` and `border-` prefixed properties); then you start throwing in vendor prefixes for things like border-radius and gradients and you’ve got even MORE repetition\n- not expressive = .selector { property: value; } - meaning that you wind up doing things like setting your color values and copy/pasting them, and hand-calculating your grid units (you are using a grid system, right?) and then littering your CSS w/ magic values etc.\n- which leads us right to the other problems... -- “no variables” (well: that’s just another form of repetition) which leads to situations where you might miss things (e.g., a single color expressed multiple ways, to say nothing of any derivative colors) -- and not being able to calculate widths and heights leads to code littered with “magic values”...\n
  11. - repetitive = you wind up copy/pasting a lot\n- repetitive = (not just joking) : parts of individual declarations can get repetitive (e.g., properties like `font-` and `border-` prefixed properties); then you start throwing in vendor prefixes for things like border-radius and gradients and you’ve got even MORE repetition\n- not expressive = .selector { property: value; } - meaning that you wind up doing things like setting your color values and copy/pasting them, and hand-calculating your grid units (you are using a grid system, right?) and then littering your CSS w/ magic values etc.\n- which leads us right to the other problems... -- “no variables” (well: that’s just another form of repetition) which leads to situations where you might miss things (e.g., a single color expressed multiple ways, to say nothing of any derivative colors) -- and not being able to calculate widths and heights leads to code littered with “magic values”...\n
  12. - repetitive = you wind up copy/pasting a lot\n- repetitive = (not just joking) : parts of individual declarations can get repetitive (e.g., properties like `font-` and `border-` prefixed properties); then you start throwing in vendor prefixes for things like border-radius and gradients and you’ve got even MORE repetition\n- not expressive = .selector { property: value; } - meaning that you wind up doing things like setting your color values and copy/pasting them, and hand-calculating your grid units (you are using a grid system, right?) and then littering your CSS w/ magic values etc.\n- which leads us right to the other problems... -- “no variables” (well: that’s just another form of repetition) which leads to situations where you might miss things (e.g., a single color expressed multiple ways, to say nothing of any derivative colors) -- and not being able to calculate widths and heights leads to code littered with “magic values”...\n
  13. - repetitive = you wind up copy/pasting a lot\n- repetitive = (not just joking) : parts of individual declarations can get repetitive (e.g., properties like `font-` and `border-` prefixed properties); then you start throwing in vendor prefixes for things like border-radius and gradients and you’ve got even MORE repetition\n- not expressive = .selector { property: value; } - meaning that you wind up doing things like setting your color values and copy/pasting them, and hand-calculating your grid units (you are using a grid system, right?) and then littering your CSS w/ magic values etc.\n- which leads us right to the other problems... -- “no variables” (well: that’s just another form of repetition) which leads to situations where you might miss things (e.g., a single color expressed multiple ways, to say nothing of any derivative colors) -- and not being able to calculate widths and heights leads to code littered with “magic values”...\n
  14. - repetitive = you wind up copy/pasting a lot\n- repetitive = (not just joking) : parts of individual declarations can get repetitive (e.g., properties like `font-` and `border-` prefixed properties); then you start throwing in vendor prefixes for things like border-radius and gradients and you’ve got even MORE repetition\n- not expressive = .selector { property: value; } - meaning that you wind up doing things like setting your color values and copy/pasting them, and hand-calculating your grid units (you are using a grid system, right?) and then littering your CSS w/ magic values etc.\n- which leads us right to the other problems... -- “no variables” (well: that’s just another form of repetition) which leads to situations where you might miss things (e.g., a single color expressed multiple ways, to say nothing of any derivative colors) -- and not being able to calculate widths and heights leads to code littered with “magic values”...\n
  15. - NOTED : pedants will argue that CSS3 adds some new selectors and pseudos and media queries -- but that doesn't really solve the problems that we're talking about here\n\n
  16. - NOTED : pedants will argue that CSS3 adds some new selectors and pseudos and media queries -- but that doesn't really solve the problems that we're talking about here\n\n
  17. - NOTED : pedants will argue that CSS3 adds some new selectors and pseudos and media queries -- but that doesn't really solve the problems that we're talking about here\n\n
  18. - NOTED : pedants will argue that CSS3 adds some new selectors and pseudos and media queries -- but that doesn't really solve the problems that we're talking about here\n\n
  19. - NOTED : pedants will argue that CSS3 adds some new selectors and pseudos and media queries -- but that doesn't really solve the problems that we're talking about here\n\n
  20. \n
  21. \n
  22. NOTED : You may want to add `sudo` in there lest you get something like\n > ERROR: While executing gem ... (Gem::FilePermissionError)\n > You don't have write permissions into the /usr/bin directory.\n\n
  23. NOTED : You may want to add `sudo` in there lest you get something like\n > ERROR: While executing gem ... (Gem::FilePermissionError)\n > You don't have write permissions into the /usr/bin directory.\n\n
  24. NOTED : You may want to add `sudo` in there lest you get something like\n > ERROR: While executing gem ... (Gem::FilePermissionError)\n > You don't have write permissions into the /usr/bin directory.\n\n
  25. NOTED : You may want to add `sudo` in there lest you get something like\n > ERROR: While executing gem ... (Gem::FilePermissionError)\n > You don't have write permissions into the /usr/bin directory.\n\n
  26. NOTED : You may want to add `sudo` in there lest you get something like\n > ERROR: While executing gem ... (Gem::FilePermissionError)\n > You don't have write permissions into the /usr/bin directory.\n\n
  27. NOTE : anyone that downloaded it can fire up the interactive mode with `sass -i`\n
  28. - so... `mv` your existing css to scss\n- and then compile it from scss to css\n- but that didn’t buy you anything\n- except that it’s drop-dead simple to migrate\n- and drop-dead simple to “just start” using it\n\nNOTE:\n- sass file.scss goes to stdout\n- sass file.scss:file.css gives it a destination file\n
  29. - so... `mv` your existing css to scss\n- and then compile it from scss to css\n- but that didn’t buy you anything\n- except that it’s drop-dead simple to migrate\n- and drop-dead simple to “just start” using it\n\nNOTE:\n- sass file.scss goes to stdout\n- sass file.scss:file.css gives it a destination file\n
  30. \n
  31. "Why save the best for last? Let's introduce everyone's favoritest Sass feature right off the bat... the one that is often called 'the single most-requested feature for CSS' -- the ability to set variables."\n\n* first: a totally contrived example that you would hopefully never see anywhere ever\n-- but it presents a thought question esp. w/r/t/ efficacy of Find/Replace (esp. if you have any derivative colors)\n\n* and right there you have a pretty compelling reason to at least look into Sass:\n-- think "themes" and "theme kits"\n-- think WordPress themes, think white labeling your enterprise apps\n\n"...now how about something a little more usefully illustrative?"\n
  32. "Why save the best for last? Let's introduce everyone's favoritest Sass feature right off the bat... the one that is often called 'the single most-requested feature for CSS' -- the ability to set variables."\n\n* first: a totally contrived example that you would hopefully never see anywhere ever\n-- but it presents a thought question esp. w/r/t/ efficacy of Find/Replace (esp. if you have any derivative colors)\n\n* and right there you have a pretty compelling reason to at least look into Sass:\n-- think "themes" and "theme kits"\n-- think WordPress themes, think white labeling your enterprise apps\n\n"...now how about something a little more usefully illustrative?"\n
  33. "Why save the best for last? Let's introduce everyone's favoritest Sass feature right off the bat... the one that is often called 'the single most-requested feature for CSS' -- the ability to set variables."\n\n* first: a totally contrived example that you would hopefully never see anywhere ever\n-- but it presents a thought question esp. w/r/t/ efficacy of Find/Replace (esp. if you have any derivative colors)\n\n* and right there you have a pretty compelling reason to at least look into Sass:\n-- think "themes" and "theme kits"\n-- think WordPress themes, think white labeling your enterprise apps\n\n"...now how about something a little more usefully illustrative?"\n
  34. "Why save the best for last? Let's introduce everyone's favoritest Sass feature right off the bat... the one that is often called 'the single most-requested feature for CSS' -- the ability to set variables."\n\n* first: a totally contrived example that you would hopefully never see anywhere ever\n-- but it presents a thought question esp. w/r/t/ efficacy of Find/Replace (esp. if you have any derivative colors)\n\n* and right there you have a pretty compelling reason to at least look into Sass:\n-- think "themes" and "theme kits"\n-- think WordPress themes, think white labeling your enterprise apps\n\n"...now how about something a little more usefully illustrative?"\n
  35. / "...now how about something a little more usefully illustrative?" /\n\n--> we dove right into "the good stuff" with variables there, but let's take a step back for a moment and explain some of the nesting that was going on in that example\n
  36. re: #1 - you've probably seen code like this? maybe even written it yourself?\n\nre: #2 - a little easier to cope w/ -- esp. if `.post` is getting used as part of the selector for a lot of the CSS\n-- (I'm looking at you, WordPress devs!?)\n\nALSO : #2 compiles to #1\n
  37. re: #1 - you've probably seen code like this? maybe even written it yourself?\n\nre: #2 - a little easier to cope w/ -- esp. if `.post` is getting used as part of the selector for a lot of the CSS\n-- (I'm looking at you, WordPress devs!?)\n\nALSO : #2 compiles to #1\n
  38. "a bit more of the same - but this time w/ properties instead of selectors"\n\n- again: #2 compiles to #1\n
  39. "a bit more of the same - but this time w/ properties instead of selectors"\n\n- again: #2 compiles to #1\n
  40. Imagine building your own little re-usable CSS function library? \n- "now you can"\n\n- we'll do this example in reverse - the Sass first, then we'll see how it compiles\n
  41. \n
  42. COMPILES TO...\n- and takes some of the pain out of your CSS3\n\n
  43. sass-lang.com says: "Sass can tell one selector to inherit all the styles of another without duplicating the CSS properties."\n\n- again: we'll do this in reverse (Sass 1st)\n
  44. \n
  45. - for a small CSS code base, & w/ a disciplined CSS dev\n-- you would probably get that result anyway\n-- but this helps to enforce it, and makes it easier to solve that problem\n\n- SIDE NOTE : note the `&` operator? - that gets the parent selector reference\n
  46. [PAUSE] "Maybe I should have started with this?"\n-- SassScript provides the foundations for a lot of what we've already seen\n\nALSO : sass-lang.com includes variables here\n-- but they got their own slide series already...)\n\nSOME EXAMPLES ... ready?\n
  47. [PAUSE] "Maybe I should have started with this?"\n-- SassScript provides the foundations for a lot of what we've already seen\n\nALSO : sass-lang.com includes variables here\n-- but they got their own slide series already...)\n\nSOME EXAMPLES ... ready?\n
  48. [PAUSE] "Maybe I should have started with this?"\n-- SassScript provides the foundations for a lot of what we've already seen\n\nALSO : sass-lang.com includes variables here\n-- but they got their own slide series already...)\n\nSOME EXAMPLES ... ready?\n
  49. [PAUSE] "Maybe I should have started with this?"\n-- SassScript provides the foundations for a lot of what we've already seen\n\nALSO : sass-lang.com includes variables here\n-- but they got their own slide series already...)\n\nSOME EXAMPLES ... ready?\n
  50. [PAUSE] "Maybe I should have started with this?"\n-- SassScript provides the foundations for a lot of what we've already seen\n\nALSO : sass-lang.com includes variables here\n-- but they got their own slide series already...)\n\nSOME EXAMPLES ... ready?\n
  51. [PAUSE] "Maybe I should have started with this?"\n-- SassScript provides the foundations for a lot of what we've already seen\n\nALSO : sass-lang.com includes variables here\n-- but they got their own slide series already...)\n\nSOME EXAMPLES ... ready?\n
  52. - checked: arithmetic\n- some simple math... that gracefully handles the units -- it even WANTS the units\n
  53. - checked: arithmetic\n- some simple math... that gracefully handles the units -- it even WANTS the units\n
  54. - checked: string interpolation, arithmetic, simple logic, control directives (looping and logical), color functions\n\nOF PARTICULAR INTEREST\n- sass-lang.com has 27 documented color functions -- including:\n-- hsl($h, $s, $l) & hsla(), $rgb() & $rgba()\n-- saturate($color, $amount)\n-- transparentize($color, #amount)\n-- mix($color_1, $color_2, [$weight])\n
  55. - `@import` is good in theory... but:\n-- generates an extra `http` request\n-- and the browser can't even execute the downloads in parallel\n-- which is why: [Google says "don't use it"](http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImport)\n\n- Sass `@import` fixes that by compiling properly\n-- [example](https://gist.github.com/709180#file_3.sass)\n-- AND/BUT if you insist on doing your @import the old-fashioned way, you can\n\n
  56. - `@import` is good in theory... but:\n-- generates an extra `http` request\n-- and the browser can't even execute the downloads in parallel\n-- which is why: [Google says "don't use it"](http://code.google.com/speed/page-speed/docs/rtt.html#AvoidCssImport)\n\n- Sass `@import` fixes that by compiling properly\n-- [example](https://gist.github.com/709180#file_3.sass)\n-- AND/BUT if you insist on doing your @import the old-fashioned way, you can\n\n
  57. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `expanded` - this being the style I would describe as "the most common for CSS source files" - with the closing curly brackets on the next line etc. - good for SCSS that is being watched in development\n
  58. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `expanded` - this being the style I would describe as "the most common for CSS source files" - with the closing curly brackets on the next line etc. - good for SCSS that is being watched in development\n
  59. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `expanded` - this being the style I would describe as "the most common for CSS source files" - with the closing curly brackets on the next line etc. - good for SCSS that is being watched in development\n
  60. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `expanded` - this being the style I would describe as "the most common for CSS source files" - with the closing curly brackets on the next line etc. - good for SCSS that is being watched in development\n
  61. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `nested` - the default - almost exactly like `expanded` but with the closing curly on the same line as the last declaration in a selector's block (to each his own...) -- ALSO: "nests" presumably derivative selector blocks - - SIDE NOTE : both `expanded` and `nested` honor line-breaks b/w selector blocks AND preserve all comments except single-line comments\n
  62. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `nested` - the default - almost exactly like `expanded` but with the closing curly on the same line as the last declaration in a selector's block (to each his own...) -- ALSO: "nests" presumably derivative selector blocks - - SIDE NOTE : both `expanded` and `nested` honor line-breaks b/w selector blocks AND preserve all comments except single-line comments\n
  63. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `nested` - the default - almost exactly like `expanded` but with the closing curly on the same line as the last declaration in a selector's block (to each his own...) -- ALSO: "nests" presumably derivative selector blocks - - SIDE NOTE : both `expanded` and `nested` honor line-breaks b/w selector blocks AND preserve all comments except single-line comments\n
  64. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `nested` - the default - almost exactly like `expanded` but with the closing curly on the same line as the last declaration in a selector's block (to each his own...) -- ALSO: "nests" presumably derivative selector blocks - - SIDE NOTE : both `expanded` and `nested` honor line-breaks b/w selector blocks AND preserve all comments except single-line comments\n
  65. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compact` - minifies each selector block to be one line; minifies multi-line comments to be one-line (unless they are /*! loud comments */); otherwise honors line-breaks b/w selector blocks\n\n
  66. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compact` - minifies each selector block to be one line; minifies multi-line comments to be one-line (unless they are /*! loud comments */); otherwise honors line-breaks b/w selector blocks\n\n
  67. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compact` - minifies each selector block to be one line; minifies multi-line comments to be one-line (unless they are /*! loud comments */); otherwise honors line-breaks b/w selector blocks\n\n
  68. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compact` - minifies each selector block to be one line; minifies multi-line comments to be one-line (unless they are /*! loud comments */); otherwise honors line-breaks b/w selector blocks\n\n
  69. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compressed` - minifies everything to a single line (unless it absolutely cannot); ONLY honors /*! loud comments */ - basically scrubs out EVERYTHING that is not ABSOLUTELY required for that CSS to work as written\n
  70. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compressed` - minifies everything to a single line (unless it absolutely cannot); ONLY honors /*! loud comments */ - basically scrubs out EVERYTHING that is not ABSOLUTELY required for that CSS to work as written\n
  71. "Considering that Sass 'fixes' the @include directive... this becomes that much more important, and its value that much more obvious."\n\n* `compressed` - minifies everything to a single line (unless it absolutely cannot); ONLY honors /*! loud comments */ - basically scrubs out EVERYTHING that is not ABSOLUTELY required for that CSS to work as written\n
  72. “I know what you’re thinking... LAME and/or SO WHAT”\n- but let’s face it -- there is NO REASON for single line comments to be missing\n...and naturally: this does not interfere with your /* multi-line comments */\n
  73. “I know what you’re thinking... LAME and/or SO WHAT”\n- but let’s face it -- there is NO REASON for single line comments to be missing\n...and naturally: this does not interfere with your /* multi-line comments */\n
  74. \n
  75. \n
  76. \n
  77. \n
  78. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  79. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  80. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  81. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  82. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  83. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  84. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  85. - ADMIT IT : we don't use Compass at DDC - and so my experience with it is ... "this much"\n- BUT it's worth mentioning b/c...\n-- it's gaining traction among Sass users\n-- -- e.g., Sencha uses it for their theming kit (nod to the previous presenter)\n-- Chris Eppstein is a Sass core contributor and the creator of Compass\n-- -- and he is also co-author of "Sass and Compass in Action" (Manning Press)\n\n"...in other words: I'm not expert, but I'd be negligent not to mention it. Hence: BONUS ROUND."\n
  86. \n
  87. LONG ANSWER involves talking about the (original? Python-inspired? deprecated?) `.sass` syntax with all of its significant whitespace etc.\n\nbut as mentioned earlier - the `.scss` syntax is a super-set of CSS -- so valid CSS is valid SCSS, and the syntax that SCSS adds is (or ought to be) exactly what you'd expect "just by adding" the nesting and the directives etc.\n
  88. LONG ANSWER involves talking about the (original? Python-inspired? deprecated?) `.sass` syntax with all of its significant whitespace etc.\n\nbut as mentioned earlier - the `.scss` syntax is a super-set of CSS -- so valid CSS is valid SCSS, and the syntax that SCSS adds is (or ought to be) exactly what you'd expect "just by adding" the nesting and the directives etc.\n
  89. LONG ANSWER involves talking about the (original? Python-inspired? deprecated?) `.sass` syntax with all of its significant whitespace etc.\n\nbut as mentioned earlier - the `.scss` syntax is a super-set of CSS -- so valid CSS is valid SCSS, and the syntax that SCSS adds is (or ought to be) exactly what you'd expect "just by adding" the nesting and the directives etc.\n
  90. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  91. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  92. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  93. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  94. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  95. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  96. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  97. - we've been talking about this for years now - about all that min'ing and concat'ing\n- and without a tool like Sass you're probably rolling your own (YUI compressor and the like for min'ing... and then what? cat each min'ed file to something else?)\n
  98. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  99. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  100. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  101. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  102. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  103. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  104. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  105. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  106. ADMIT IT : "I'm just as guilty of this as anyone else..."\n-- bad habits? deep nesting?\n-- -- but Sass has helped me change my thinking about CSS...\n
  107. "By all means: use Sass along with your CSS framework of choice."\n\n"At the end of the day -- even if you are using a grid system or some other framework -- you are still writing your own CSS within that framework. You should be using Sass to manage THAT."\n\nGOAL (of both) = make your life easier\n-- so... "What is going to make your life easier?"\n\n- http://www.blueprintcss.org/ \n
  108. "By all means: use Sass along with your CSS framework of choice."\n\n"At the end of the day -- even if you are using a grid system or some other framework -- you are still writing your own CSS within that framework. You should be using Sass to manage THAT."\n\nGOAL (of both) = make your life easier\n-- so... "What is going to make your life easier?"\n\n- http://www.blueprintcss.org/ \n
  109. "By all means: use Sass along with your CSS framework of choice."\n\n"At the end of the day -- even if you are using a grid system or some other framework -- you are still writing your own CSS within that framework. You should be using Sass to manage THAT."\n\nGOAL (of both) = make your life easier\n-- so... "What is going to make your life easier?"\n\n- http://www.blueprintcss.org/ \n
  110. - deeply nested selectors in Sass still get compiled to really long selectors (try to limit yourself there)\n\n- sometimes there is nothing you can do about the verbosity of the compiled CSS\n-- but if you're using Sass effectively (w/ @extend + @mixin etc.) then it should take care of most of the optimizations for you\n-- "If the Sass is compiling to ugly CSS, just think of how ugly it might have been if you had written it yourself?"\n\n- "the important thing is..." - that your Sass source is clean and easy to follow, which should make development time (and maintenance!) a breeze compared to "the old fashioned way"\n
  111. - deeply nested selectors in Sass still get compiled to really long selectors (try to limit yourself there)\n\n- sometimes there is nothing you can do about the verbosity of the compiled CSS\n-- but if you're using Sass effectively (w/ @extend + @mixin etc.) then it should take care of most of the optimizations for you\n-- "If the Sass is compiling to ugly CSS, just think of how ugly it might have been if you had written it yourself?"\n\n- "the important thing is..." - that your Sass source is clean and easy to follow, which should make development time (and maintenance!) a breeze compared to "the old fashioned way"\n
  112. - deeply nested selectors in Sass still get compiled to really long selectors (try to limit yourself there)\n\n- sometimes there is nothing you can do about the verbosity of the compiled CSS\n-- but if you're using Sass effectively (w/ @extend + @mixin etc.) then it should take care of most of the optimizations for you\n-- "If the Sass is compiling to ugly CSS, just think of how ugly it might have been if you had written it yourself?"\n\n- "the important thing is..." - that your Sass source is clean and easy to follow, which should make development time (and maintenance!) a breeze compared to "the old fashioned way"\n
  113. - deeply nested selectors in Sass still get compiled to really long selectors (try to limit yourself there)\n\n- sometimes there is nothing you can do about the verbosity of the compiled CSS\n-- but if you're using Sass effectively (w/ @extend + @mixin etc.) then it should take care of most of the optimizations for you\n-- "If the Sass is compiling to ugly CSS, just think of how ugly it might have been if you had written it yourself?"\n\n- "the important thing is..." - that your Sass source is clean and easy to follow, which should make development time (and maintenance!) a breeze compared to "the old fashioned way"\n
  114. - deeply nested selectors in Sass still get compiled to really long selectors (try to limit yourself there)\n\n- sometimes there is nothing you can do about the verbosity of the compiled CSS\n-- but if you're using Sass effectively (w/ @extend + @mixin etc.) then it should take care of most of the optimizations for you\n-- "If the Sass is compiling to ugly CSS, just think of how ugly it might have been if you had written it yourself?"\n\n- "the important thing is..." - that your Sass source is clean and easy to follow, which should make development time (and maintenance!) a breeze compared to "the old fashioned way"\n
  115. \n
  116. \n