0
Simplifying CSS
   with Sass
     Thomas Reynolds
         @tdreyno
    tdreyno@gmail.com
  awardwinningfjords.com
Who uses CSS?
Who writes a lot of CSS?
What are some
common problems?
Selector Repetition
    Even if we do everything right,
we still end up with something like this
       #navigation {...}
...
Style Repetition
#navigation ul li#nav_home {
  background: url(/images/home_off.gif) no-repeat; }
#navigation ul li#nav_f...
IE Hacks
Who’s written this before?
    .clearfix:after {
      content: ".";
      display: block;
      clear: both;
   ...
CSS Soup
#header { display:block; width:950px; height:85px; position:relative; overflow:hidden; }
#header h1 { clear:both;...
Browser have different
    CSS defaults
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, bl...
Can we improve it?

• Avoid selector repetition with nesting
• Avoid style repetition with functions
• Build IE Hacks into...
Text


sass-lang.com
The Language

#example {
  border: 1px solid black;
  background: blue; }
The Language

#example
  border: 1px solid black
  background: blue
The Language
#example {
  border: 1px solid black;
  background: blue; }


     css2sass input.sass


#example
  border: 1...
Variables
!border_color = #ccc
#example
  :border= !border_color
Avoid Selector
                 Repetition
                CSS                           Sass
#navigation {...}           ...
Avoid Style Repetition
                             CSS
   #navigation ul li#nav_home {
     background: url(/images/home_...
Common mixins
Common mixins
• The Compass Project implements
 • YUI
 • Blueprint
 • 960.gs
 • Browser reset, clearfix, horizontal lists,
...
IE Hacks
          CSS                      Sass
.clearfix:after {            @import compass.sass
  content: ".";
  displ...
Reset Stylesheets

• Take your pick
 • @import compass/reset.sass
 • @import blueprint/reset.sass
 • @import yui/reset.sass
Putting it all together

• Re-implement the Blueprint sample page:
 • Semantic HTML
 • All layout in CSS, not HTML classes...
@import blueprint/reset
@import blueprint/modules/grid
@import blueprint/modules/fancy_type

+blueprint-typography
+fancy-...
#box1          #box2          #box3
  +column(7)     +column(8)     +column(7)
  +colborder     +colborder     +last
#content
  +column(15)
  +prepend(1)
  +colborder
  img
    +pull(1)
#nested1       #nested2
  +column(7)     +column(7)
  +colborder     +last
#sidebar
  +column(7)
  +last
  h3 span
    +alt
Putting it all togetherhtml, body {
                                                                                      ...
Learn more
• Sass: http://sass-lang.com
  •   Sass Textmate Bundle:
      http://github.com/seaofclouds/sass-textmate-bund...
Questions?


   Thomas Reynolds
       @tdreyno
  tdreyno@gmail.com
awardwinningfjords.com
Simplifying CSS With Sass
Simplifying CSS With Sass
Upcoming SlideShare
Loading in...5
×

Simplifying CSS With Sass

6,480

Published on

An introduction to Sass, the CSS preprocessor which saves you time and increases your productivity.

Published in: Technology, Education
1 Comment
12 Likes
Statistics
Notes
  • clear overview
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,480
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
126
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "Simplifying CSS With Sass"

  1. 1. Simplifying CSS with Sass Thomas Reynolds @tdreyno tdreyno@gmail.com awardwinningfjords.com
  2. 2. Who uses CSS?
  3. 3. Who writes a lot of CSS?
  4. 4. What are some common problems?
  5. 5. Selector Repetition Even if we do everything right, we still end up with something like this #navigation {...} #navigation ul {...} #navigation ul li {...} #navigation ul li.first {...} #navigation ul li.last {...} #navigation ul li a {...} #navigation ul li a:hover {...}
  6. 6. Style Repetition #navigation ul li#nav_home { background: url(/images/home_off.gif) no-repeat; } #navigation ul li#nav_features { background: url(/images/features_off.gif) no-repeat; } #navigation ul li#nav_tour { background: url(/images/tour_off.gif) no-repeat; } #navigation ul li#nav_business_care { background: url(/images/business_care_off.gif) no-repeat; } #navigation ul li#nav_quantum { background: url(/images/quantum_off.gif) no-repeat; } #navigation ul li#nav_payroll_solutions { background: url(/images/payroll_solutions_off.gif) no-repeat; } #navigation ul li#nav_addons { background: url(/images/addons_off.gif) no-repeat; } #navigation ul li#nav_system_reqs { background: url(/images/system_reqs_off.gif) no-repeat; }
  7. 7. IE Hacks Who’s written this before? .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }
  8. 8. CSS Soup #header { display:block; width:950px; height:85px; position:relative; overflow:hidden; } #header h1 { clear:both; display:block; position:relative; width:394px; height:27px; left:29px; overflow:hidden; text-indent:-999em; background:url(/Content/images-FR/ logo_fr.gif) 0 0 no-repeat transparent; } #header .toplinks { display:block; height:34px; padding-right:46px; text-align:right; height:34px; overflow:hidden; vertical-align:bottom; font:normal 1.2em/3.9em arial; } #header p { position:absolute; width:250px; height:52px; overflow:hidden; font:bold 13px/17px arial; color:#000; padding-right:46px; text-align:right; top:40px; right:0; } #header p small { clear:both; display:block; font:bold 13px/18px arial; color:#00338d; } Actual CSS a co-worker sent me
  9. 9. Browser have different CSS defaults html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } Part of Eric Meyer’s CSS Reset
  10. 10. Can we improve it? • Avoid selector repetition with nesting • Avoid style repetition with functions • Build IE Hacks into the language • Require well-formatted code • Reset browser defaults without googling
  11. 11. Text sass-lang.com
  12. 12. The Language #example { border: 1px solid black; background: blue; }
  13. 13. The Language #example border: 1px solid black background: blue
  14. 14. The Language #example { border: 1px solid black; background: blue; } css2sass input.sass #example border: 1px solid black background: blue
  15. 15. Variables !border_color = #ccc #example :border= !border_color
  16. 16. Avoid Selector Repetition CSS Sass #navigation {...} #navigation #navigation ul {...} ul #navigation ul li {...} li #navigation ul li.first {...} &.first #navigation ul li.last {...} &.last #navigation ul li a {...} a #navigation ul li a:hover {...} &:hover
  17. 17. Avoid Style Repetition CSS #navigation ul li#nav_home { background: url(/images/home_off.gif) no-repeat; } #navigation ul li#nav_features { background: url(/images/features_off.gif) no-repeat; } #navigation ul li#nav_tour { background: url(/images/tour_off.gif) no-repeat; } #navigation ul li#nav_business_care { background: url(/images/business_care_off.gif) no-repeat; } Sass =nav-item(!name) &#nav_#{!name} :background url(/images/#{!name}_off.gif) no-repeat #navigation ul li +nav-item("home") +nav-item("features") +nav-item("tour") +nav-item("business_car")
  18. 18. Common mixins
  19. 19. Common mixins • The Compass Project implements • YUI • Blueprint • 960.gs • Browser reset, clearfix, horizontal lists, sprites, custom bullet images & more
  20. 20. IE Hacks CSS Sass .clearfix:after { @import compass.sass content: "."; display: block; .clearfix clear: both; +clearfix visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }
  21. 21. Reset Stylesheets • Take your pick • @import compass/reset.sass • @import blueprint/reset.sass • @import yui/reset.sass
  22. 22. Putting it all together • Re-implement the Blueprint sample page: • Semantic HTML • All layout in CSS, not HTML classes • Using Sass mixins for Blueprint
  23. 23. @import blueprint/reset @import blueprint/modules/grid @import blueprint/modules/fancy_type +blueprint-typography +fancy-type h2 +alt hr +colruler &.space +colspacer #frame +container
  24. 24. #box1 #box2 #box3 +column(7) +column(8) +column(7) +colborder +colborder +last
  25. 25. #content +column(15) +prepend(1) +colborder img +pull(1)
  26. 26. #nested1 #nested2 +column(7) +column(7) +colborder +last
  27. 27. #sidebar +column(7) +last h3 span +alt
  28. 28. Putting it all togetherhtml, body { ol { margin: 0 1.5em 1.5em 1.5em; h2 margin: 0; list-style-type: decimal; } padding: 0; dl { border: 0; margin: 0 0 1.5em 0; } font-weight: inherit; dl dt { font-style: inherit; font-weight: bold; } +alt font-size: 100%; dd { font-family: inherit; margin-left: 1.5em; } vertical-align: baseline; } table { div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, margin-bottom: 1.4em; pre, a, abbr, acronym, address, code, del, dfn, em, img, width: 100%; } hr dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr { th { margin: 0; font-weight: bold; } padding: 0; thead th { border: 0; background: #c3d9ff; } font-weight: inherit; th, td, caption { +colruler font-style: inherit; padding: 4px 10px 4px 5px; } font-size: 100%; tr.even td { font-family: inherit; background: #e5ecf9; } vertical-align: baseline; } tfoot { blockquote, q { font-style: italic; } &.space margin: 0; caption { padding: 0; background: #eee; } border: 0; .quiet { font-weight: inherit; color: #666666; } font-style: inherit; .loud { +colspacer font-size: 100%; color: #111111; } font-family: inherit; p + p { vertical-align: baseline; text-indent: 2em; quotes: "" ""; } margin-top: -1.5em; blockquote:before, q:before, /* Don't want this in forms. */ } #frame blockquote:after, q:after { form p + p { content: ""; } text-indent: 0; } th, td, caption { p.incr, margin: 0; .incr p { padding: 0; font-size: 0.833em; +container border: 0; line-height: 1.44em; font-weight: inherit; margin-bottom: 1.5em; } font-style: inherit; .caps { font-size: 100%; font-variant: small-caps; font-family: inherit; letter-spacing: 1px; #box1 vertical-align: baseline; text-transform: lowercase; text-align: left; font-size: 1.2em; font-weight: normal; line-height: 1%; vertical-align: middle; } font-weight: bold; table { padding: 0 2px; } +column(7) margin: 0; .dquo { padding: 0; margin-left: -!offset; } border: 0; .alt { font-weight: inherit; color: #666; font-style: inherit; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; +colborder font-size: 100%; font-style: italic; font-family: inherit; font-weight: normal; } vertical-align: baseline; h2 { border-collapse: separate; color: #666; border-spacing: 0; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; #box2 vertical-align: middle; } font-style: italic; a img { font-weight: normal; } border: none; } hr { body { background: #dddddd; line-height: 1.5; color: #dddddd; +column(8) font-family: Helvetica Neue, Arial, Helvetica, sans-serif; clear: both; color: #333333; float: none; font-size: 75%; } width: 100%; h1 { height: .1em; font-weight: normal; margin: 0 0 1.45em; +colborder color: #222222; border: none; } font-size: 3em; hr.space { line-height: 1; background: #dddddd; margin-bottom: 0.5em; } color: #dddddd; h1 img { clear: both; #box3 margin: 0; } float: none; h2 { width: 100%; font-weight: normal; height: .1em; color: #222222; margin: 0 0 1.45em; font-size: 2em; border: none; +column(7, true) margin-bottom: 0.75em; } background: #fff; h3 { color: #fff; } font-weight: normal; #frame { color: #222222; width: 950px; font-size: 1.5em; margin: 0 auto; #content line-height: 1; overflow: hidden; margin-bottom: 1em; } display: inline-block; } h4 { #frame { font-weight: normal; display: block; } color: #222222; #box1 { +column(15) font-size: 1.2em; display: inline; line-height: 1.25; float: left; margin-bottom: 1.25em; } margin-right: 10px; h5 { width: 270px; font-weight: normal; padding-right: 24px; +prepend(1) color: #222222; margin-right: 25px; font-size: 1em; border-right: 1px solid #eeeeee; } font-weight: bold; * html #box1 { margin-bottom: 1.5em; } overflow-x: hidden; } h6 { #box2 { +colborder font-weight: normal; display: inline; color: #222222; float: left; font-size: 1em; margin-right: 10px; font-weight: bold; } width: 310px; h2 img, h3 img, h4 img, h5 img, h6 img { padding-right: 24px; img margin: 0; } margin-right: 25px; p { border-right: 1px solid #eeeeee; } margin: 0 0 1.5em; } * html #box2 { p img.left { overflow-x: hidden; } display: inline; #box3 { +pull(1) float: left; display: inline; margin: 1.5em 1.5em 1.5em 0; float: left; padding: 0; } margin-right: 0; p img.right { width: 270px; } display: inline; * html #box3 { #nested1 float: right; overflow-x: hidden; } margin: 1.5em 0 1.5em 1.5em; #content { padding: 0; } display: inline; a { float: left; text-decoration: underline; margin-right: 10px; +column(7) color: #000099; } width: 590px; a:visited { padding-left: 40px; color: #000066; } padding-right: 24px; a:focus { margin-right: 25px; color: black; } border-right: 1px solid #eeeeee; } +colborder a:hover { * html #content { color: black; } overflow-x: hidden; } a:active { #content img { color: #cc0099; } display: inline; blockquote { float: left; #nested2 margin: 1.5em; position: relative; color: #666; margin-left: -40px; } font-style: italic; } #content #nested1 { strong { display: inline; font-weight: bold; } float: left; +column(7, true) em { margin-right: 10px; font-style: italic; } width: 270px; dfn { padding-right: 24px; font-style: italic; margin-right: 25px; font-weight: bold; } border-right: 1px solid #eeeeee; } #sidebar sup, sub { * html #content #nested1 { line-height: 0; } overflow-x: hidden; } abbr, acronym { #content #nested2 { border-bottom: 1px dotted #666; } display: inline; address { float: left; +column(7, true) margin: 0 0 1.5em; margin-right: 0; font-style: italic; } width: 270px; } del { * html #content #nested2 { color: #666; } overflow-x: hidden; } pre { #sidebar { h3 span margin: 1.5em 0; display: inline; white-space: pre; } float: left; pre, code, tt { margin-right: 0; font: 1em 'andale mono', 'lucida console', monospace; width: 270px; } line-height: 1.5; } * html #sidebar { +alt li ul, li ol { overflow-x: hidden; } margin: 0 1.5em; } #sidebar h3 span { ul { color: #666; margin: 0 1.5em 1.5em 1.5em; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; list-style-type: disc; } font-style: italic; font-weight: normal; }
  29. 29. Learn more • Sass: http://sass-lang.com • Sass Textmate Bundle: http://github.com/seaofclouds/sass-textmate-bundle/ • Compass: http://compass-style.org • Compass Textmate Bundle: http://github.com/grimen/compass_blueprint_tmbundle/ • Blueprint CSS: http://blueprintcss.org/ • Me! http://awardwinningfjords.com/
  30. 30. Questions? Thomas Reynolds @tdreyno tdreyno@gmail.com awardwinningfjords.com
  1. A particular slide catching your eye?

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

×