Simplifying CSS With Sass

  • 6,308 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • clear overview
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
6,308
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
122
Comments
1
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Simplifying CSS with Sass Thomas Reynolds @tdreyno tdreyno@gmail.com awardwinningfjords.com
  • 2. Who uses CSS?
  • 3. Who writes a lot of CSS?
  • 4. What are some common problems?
  • 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. 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. 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. 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. 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. 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. Text sass-lang.com
  • 12. The Language #example { border: 1px solid black; background: blue; }
  • 13. The Language #example border: 1px solid black background: blue
  • 14. The Language #example { border: 1px solid black; background: blue; } css2sass input.sass #example border: 1px solid black background: blue
  • 15. Variables !border_color = #ccc #example :border= !border_color
  • 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. 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. Common mixins
  • 19. Common mixins • The Compass Project implements • YUI • Blueprint • 960.gs • Browser reset, clearfix, horizontal lists, sprites, custom bullet images & more
  • 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. Reset Stylesheets • Take your pick • @import compass/reset.sass • @import blueprint/reset.sass • @import yui/reset.sass
  • 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. @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. #box1 #box2 #box3 +column(7) +column(8) +column(7) +colborder +colborder +last
  • 25. #content +column(15) +prepend(1) +colborder img +pull(1)
  • 26. #nested1 #nested2 +column(7) +column(7) +colborder +last
  • 27. #sidebar +column(7) +last h3 span +alt
  • 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. 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. Questions? Thomas Reynolds @tdreyno tdreyno@gmail.com awardwinningfjords.com