Your SlideShare is downloading. ×
0
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      b...
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.comcreated by Hampton Catlin   Nathan Weizenb...
Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.comSass/SCSS is a CSS meta-language written i...
In other words: it fixes CSS
In other words: it fixes CSS“But CSS is perfect, right?What could you possiblywant to add?”
CSS problems
CSS problemsrepetitive
CSS problemsrepetitiverepetitive
CSS problemsrepetitiverepetitivenot expressive
CSS problemsrepetitiverepetitivenot expressiveno variables
CSS problemsrepetitiverepetitivenot expressiveno variablesno 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 offersvariables              conditionalsselector inheritance   loopsmixins                 syntax validationcal...
Getting Sass
Getting Sass         $
gem
install
sass                              * requires Rubydownload source/contribute:   github.c...
“OK, I’ve got it. Now what?”
baby stepsCSS is Sass   and Sass (SCSS) compiles to CSS
baby stepsCSS 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 al...
#1 : Variables
#1 : Variables/**
*
Why
find/replace
in
CSS
*
files
doesnt
work:
*/h1#masthead
{  color:
#f00;}.post‐hd
{  color:
#ff0000;...
#1 : Variables/**                            //
Sass
to
the
rescue
*
Why
find/replace
in
CSS
*
files
doesnt
work:         ...
#1 : Variables
#1 : Variables
#1 : Variables    $theme_accent:
#771100;    $theme_bg:
#222222;    
    #container
{    

h1,
h2,
h3
{
color:
$theme_acce...
#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
{  cod...
#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;}.sty...
#4 : Mixins
#4 : Mixins    @mixin
rounded‐top($radius:
10px)
{      $side:
top;      ‐moz‐border‐radius:
{        #{$side}left:
$radiu...
#4 : Mixins    @mixin
rounded‐top($radius:
10px)
{    .section‐hd
{      $side:
top;    

‐moz‐border‐radius‐topleft:
10px...
#4 : Mixins@mixin
rounded‐top($radius:
10px)
{     .section‐hd
{  $side:
top;                           

‐moz‐border‐radi...
#5 : Selector Inheritance
#5 : Selector Inheritance      .blue‐box
{      
 width:
100px;      
 height:
100px;      
 padding:
25px;      
 backgro...
#5 : Selector Inheritance      .blue‐box
{      .blue‐box,
.bordered‐blue‐box
{      
 width:
100px;          width:
100px...
#5 : Selector Inheritance.blue‐box
{                 .blue‐box,
.bordered‐blue‐box
{
 width:
100px;               width:
1...
#6 : SassScript
#6 : SassScriptarithmetic
#6 : SassScriptarithmeticstring interpolationwith #{}
#6 : SassScriptarithmeticstring interpolationwith #{}simple logic   equality operators,   relational operators
#6 : SassScriptarithmetic                control directivesstring interpolation         @if, @else
if, and                ...
#6 : SassScriptarithmetic                control directivesstring interpolation         @if, @else
if, and                ...
#6 : SassScript
#6 : SassScript
#6 : SassScriptarticle
{  $base_font_size:
12px;  $base_line_height:
$base_font_size
*
1.5;    font‐size:
$base_font_size;...
#6 : SassScript
#6 : SassScript
#6 : SassScript   //
looping
with
conditional
logic   @for
$i
from
1
through
10
{     $flickr_pink:
#ff1c92;     #flickr_b...
#7 : @import done right
#7 : @import done right/**
*
CSS
@include
directive
*
‐
good
in
theory
but...
*

*
‐
generates
an
extra
http
*


request
f...
#7 : @import done right/**                            /**
*
CSS
@include
directive      
*
SCSS
@import
directive
*
‐
good...
#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
*/...
#9 : Comments (Line & Loud)/*!
"Loud
comments"             /*!
"Loud
comment"
*
are
just
like
regular
ones   
*
e.g.,
for
...
#10 : Validation
#10 : Validationcatch breaking errors and fail loudly
#10 : Validationcatch breaking errors and fail loudly   print validation errors to the console at compile time
#10 : Validationcatch breaking errors and fail loudly   print validation errors to the console at compile time   print val...
#10 : Validationcatch breaking errors and fail loudly   print validation errors to the console at compile time   print val...
BONUS: Compass
BONUS: Compassan open-source CSS authoring framework   compass-style.org
BONUS: Compassan open-source CSS authoring framework   compass-style.orgprovides mixins, functions, helpers, and other uti...
BONUS: Compassan open-source CSS authoring framework   compass-style.orgprovides mixins, functions, helpers, and other uti...
BONUS: Compassan open-source CSS authoring framework   compass-style.orgprovides mixins, functions, helpers, and other uti...
BONUS: Compassan open-source CSS authoring framework   compass-style.orgprovides mixins, functions, helpers, and other uti...
BONUS: Compassan open-source CSS authoring framework   compass-style.orgprovides mixins, functions, helpers, and other uti...
"But what about..."(addressing the bosses and other nay-sayers)
"Isnt it a different syntax?"
"Isnt it a different syntax?"SHORT ANSWER: "No."  (werent you paying attention?)
"Isnt it a different syntax?"
"Isnt it adding a step?"
"Isnt it adding a step?"technically yes but...
"Isnt it adding a step?"technically yes but......shouldnt you be minifying and concatenating your CSSanyway?
"Isnt it adding a step?" technically yes but... ...shouldnt you be minifying and concatenating your CSS anyway? for develo...
"Isnt 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 frameworkSass wont guarantee great...
"Why not just use OOCSS?"                                      * the technique, not the frameworkSass wont guarantee great...
"Why not just use OOCSS?"                                      * the technique, not the frameworkSass wont guarantee great...
"Why not just use OOCSS?"                                          * the technique, not the frameworkSass wont guarantee g...
"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]?"
"Wont my compiled CSS still be a mess?"
"Wont my compiled CSS still be a mess?"    SHORT ANSWER: "Maybe?"
"Wont my compiled CSS still be a mess?"    SHORT ANSWER: "Maybe?"      bad habits are still bad habits
"Wont my compiled CSS still be a mess?"    SHORT ANSWER: "Maybe?"      bad habits are still bad habits      (compiled) CSS...
"Wont my compiled CSS still be a mess?"    SHORT ANSWER: "Maybe?"      bad habits are still bad habits      (compiled) CSS...
"Wont my compiled CSS still be a mess?"
What are you waiting for?
Thank you.
Thank you.
Upcoming SlideShare
Loading in...5
×

Wrangling the CSS Beast with Sass

1,803

Published on

Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic.

Code examples at: https://github.com/founddrama/vt-code-camp

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,803
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • - other claim to fame: a reviewer for Fogus/Houser "Joy of Clojure"\n
  • - other claim to fame: a reviewer for Fogus/Houser "Joy of Clojure"\n
  • - ...and numerous others (including Eric Meyer)\n
  • - ...and numerous others (including Eric Meyer)\n
  • - ...and numerous others (including Eric Meyer)\n
  • 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
  • \n
  • \n
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • \n
  • \n
  • 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
  • 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
  • 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
  • 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
  • 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
  • NOTE : anyone that downloaded it can fire up the interactive mode with `sass -i`\n
  • - 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
  • - 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
  • \n
  • "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
  • "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
  • "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
  • "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
  • / "...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
  • 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
  • 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
  • "a bit more of the same - but this time w/ properties instead of selectors"\n\n- again: #2 compiles to #1\n
  • "a bit more of the same - but this time w/ properties instead of selectors"\n\n- again: #2 compiles to #1\n
  • 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
  • \n
  • COMPILES TO...\n- and takes some of the pain out of your CSS3\n\n
  • 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
  • \n
  • - 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
  • [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
  • [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
  • [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
  • [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
  • [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
  • [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
  • - checked: arithmetic\n- some simple math... that gracefully handles the units -- it even WANTS the units\n
  • - checked: arithmetic\n- some simple math... that gracefully handles the units -- it even WANTS the units\n
  • - 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
  • - `@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
  • - `@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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • "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
  • “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
  • “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
  • \n
  • \n
  • \n
  • \n
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • \n
  • 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
  • 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
  • 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • "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
  • "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
  • "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
  • - 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
  • - 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
  • - 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
  • - 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
  • - 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
  • \n
  • \n
  • Transcript of "Wrangling the CSS Beast with Sass"

    1. 1. Wrangling the CSS Beast with Sass by Rob Friesel
    2. 2. Who is this guy?
    3. 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. 4. Sass: what the heck is that?
    5. 5. Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.com
    6. 6. Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.comcreated by Hampton Catlin Nathan Weizenbaum, primary designer & lead developer Chris Eppstein, core contributor & creator of Compass
    7. 7. Sass: what the heck is that?“Syntactically Awesome Style Sheets” - sass-lang.comSass/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. 8. In other words: it fixes CSS
    9. 9. In other words: it fixes CSS“But CSS is perfect, right?What could you possiblywant to add?”
    10. 10. CSS problems
    11. 11. CSS problemsrepetitive
    12. 12. CSS problemsrepetitiverepetitive
    13. 13. CSS problemsrepetitiverepetitivenot expressive
    14. 14. CSS problemsrepetitiverepetitivenot expressiveno variables
    15. 15. CSS problemsrepetitiverepetitivenot expressiveno variablesno functions, no calculations, no inheritance, etc.
    16. 16. CSS3 to the rescue?
    17. 17. CSS3 to the rescue?Not really
    18. 18. CSS3 to the rescue?Not really some new properties
    19. 19. CSS3 to the rescue?Not really some new properties some new values
    20. 20. CSS3 to the rescue?Not really some new properties some new values no new syntax
    21. 21. CSS3 Sass to the rescue
    22. 22. What Sass offersvariables conditionalsselector inheritance loopsmixins syntax validationcalculations and more
    23. 23. Getting Sass
    24. 24. Getting Sass $
gem
install
sass * requires Rubydownload source/contribute: github.com/nex3/sass
    25. 25. “OK, I’ve got it. Now what?”
    26. 26. baby stepsCSS is Sass and Sass (SCSS) compiles to CSS
    27. 27. baby stepsCSS is Sass and Sass (SCSS) compiles to CSS $
mv
my.css
my.scss $
sass
my.scss:my.css
    28. 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
    29. 29. #1 : Variables
    30. 30. #1 : Variables/**
*
Why
find/replace
in
CSS
*
files
doesnt
work:
*/h1#masthead
{ color:
#f00;}.post‐hd
{ color:
#ff0000;}a.outbound‐link
{ color:
red;}.sidebar
p
{ color:
rgba(255,
0,
0,
1);}
    31. 31. #1 : Variables/** //
Sass
to
the
rescue
*
Why
find/replace
in
CSS
*
files
doesnt
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;} }
    32. 32. #1 : Variables
    33. 33. #1 : Variables
    34. 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. 35. #2 : Nesting (selectors)
    36. 36. #2 : Nesting (selectors).post
code,.post
pre,.post
.source
{ font‐family:
"Inconsolata",
Courier,
monospace;}
    37. 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. 38. #3 : Nesting (properties)
    39. 39. #3 : Nesting (properties).styled‐text
{ font‐family:
"Georgia",
Times,
serif; font‐style:
oblique; font‐size:
2em;}
    40. 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; }}
    41. 41. #4 : Mixins
    42. 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. 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. 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. 45. #5 : Selector Inheritance
    46. 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. 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. 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;} }
    49. 49. #6 : SassScript
    50. 50. #6 : SassScriptarithmetic
    51. 51. #6 : SassScriptarithmeticstring interpolationwith #{}
    52. 52. #6 : SassScriptarithmeticstring interpolationwith #{}simple logic equality operators, relational operators
    53. 53. #6 : SassScriptarithmetic control directivesstring interpolation @if, @else
if, and @elsewith #{} @for, @each, and @whilesimple logic equality operators, relational operators
    54. 54. #6 : SassScriptarithmetic control directivesstring interpolation @if, @else
if, and @elsewith #{} @for, @each, and @whilesimple logic equality operators, color operations relational operators
    55. 55. #6 : SassScript
    56. 56. #6 : SassScript
    57. 57. #6 : SassScriptarticle
{ $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;
}}
    58. 58. #6 : SassScript
    59. 59. #6 : SassScript
    60. 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. 61. #7 : @import done right
    62. 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. 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. 64. #8 : Built-in minification
    65. 65. #8 : Built-in minification$ sass
‐‐style
expanded
style.scss:style.css
    66. 66. #8 : Built-in minification$
    67. 67. #8 : Built-in minification
    68. 68. #8 : Built-in minification$ sass
‐‐style
nested
style.scss:style.css
    69. 69. #8 : Built-in minification$
    70. 70. #8 : Built-in minification
    71. 71. #8 : Built-in minification$ sass
‐‐style
compact
style.scss:style.css
    72. 72. #8 : Built-in minification$
    73. 73. #8 : Built-in minification
    74. 74. #8 : Built-in minification$ sass
‐‐style
compressed
style.scss:style.css
    75. 75. #9 : Comments (Line & Loud)
    76. 76. #9 : Comments (Line & Loud)/*!
"Loud
comments"
*
are
just
like
regular
ones
*/.some‐col‐class
{ /*
forced
line
comment
*/ width:
160px; font‐size:
2em;}
    77. 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;} }
    78. 78. #10 : Validation
    79. 79. #10 : Validationcatch breaking errors and fail loudly
    80. 80. #10 : Validationcatch breaking errors and fail loudly print validation errors to the console at compile time
    81. 81. #10 : Validationcatch breaking errors and fail loudly print validation errors to the console at compile time print validation errors to the page mark-up
    82. 82. #10 : Validationcatch breaking errors and fail loudly print validation errors to the console at compile time print validation errors to the page mark-updoesnt catch everything, but catches the important things
    83. 83. BONUS: Compass
    84. 84. BONUS: Compassan open-source CSS authoring framework compass-style.org
    85. 85. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities
    86. 86. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting
    87. 87. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting image URLs
    88. 88. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting image URLs CSS3
    89. 89. BONUS: Compassan open-source CSS authoring framework compass-style.orgprovides mixins, functions, helpers, and other utilities spriting image URLs CSS3
    90. 90. "But what about..."(addressing the bosses and other nay-sayers)
    91. 91. "Isnt it a different syntax?"
    92. 92. "Isnt it a different syntax?"SHORT ANSWER: "No." (werent you paying attention?)
    93. 93. "Isnt it a different syntax?"
    94. 94. "Isnt it adding a step?"
    95. 95. "Isnt it adding a step?"technically yes but...
    96. 96. "Isnt it adding a step?"technically yes but......shouldnt you be minifying and concatenating your CSSanyway?
    97. 97. "Isnt it adding a step?" technically yes but... ...shouldnt you be minifying and concatenating your CSS anyway? for development:$
sass
‐‐watch
src/sass:deploy/css
    98. 98. "Isnt it adding a step?"
    99. 99. "Why not just use OOCSS?"
    100. 100. "Why not just use OOCSS?" * the technique, not the framework
    101. 101. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS
    102. 102. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS break bad habits
    103. 103. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS break bad habits avoid deeply nested Sass
    104. 104. "Why not just use OOCSS?" * the technique, not the frameworkSass wont guarantee great compiled CSS break bad habits avoid deeply nested SassOOCSS lessons still apply (just apply them via Sass!)
    105. 105. "Why not just use OOCSS?"
    106. 106. "Why not use [insert framework]?"
    107. 107. "Why not use [insert framework]?"Nothing wrong with using a framework Compass has built-in support for Blueprint grids
    108. 108. "Why not use [insert framework]?"
    109. 109. "Wont my compiled CSS still be a mess?"
    110. 110. "Wont my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?"
    111. 111. "Wont my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits
    112. 112. "Wont my compiled CSS still be a mess?" SHORT ANSWER: "Maybe?" bad habits are still bad habits (compiled) CSS is still CSS
    113. 113. "Wont 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. 114. "Wont my compiled CSS still be a mess?"
    115. 115. What are you waiting for?
    116. 116. Thank you.
    117. 117. Thank you.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×