Download as KEY, PPTX
![IE HacksWho’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%; }](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fsimplifyingcsswithsass-090724010510-phpapp02%2f75%2fSimplifying-CSS-With-Sass-7-2048.jpg&f=jpg&w=240)
![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%; }](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fsimplifyingcsswithsass-090724010510-phpapp02%2f75%2fSimplifying-CSS-With-Sass-20-2048.jpg&f=jpg&w=240)
TR
Uploaded byThomas Reynolds
KEY, PPTX2,602 views
Simplifying CSS With Sass
The document discusses using Sass (Syntactically Awesome StyleSheets) to simplify CSS by avoiding selector and style repetition, building in browser resets and common mixins, and requiring well-formatted code. It provides examples of how Sass allows nesting selectors to reduce repetition, uses variables and functions to DRY up styles, and leverages Compass mixins and resets. The overall message is that Sass can help organize, maintain, and improve CSS code quality.
![Organizing & Simplifying CSS [with Sass]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2forganizingcss-100527235847-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
Similar to Simplifying CSS With Sass
Recently uploaded
Simplifying CSS With Sass
- 1.Simplifying CSS with Sass Thomas Reynolds @tdreyno tdreyno@gmail.com awardwinningfjords.com
- 2.
- 3.Who writes alot of CSS?
- 4.What are somecommonproblems?
- 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 ulli#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 HacksWho’s writtenthis 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:bold13px/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 improveit?• 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.
- 12.The Language#example { border: 1px solid black; background: blue; }
- 13.The Language#exampleborder: 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.
- 19.Common mixins• TheCompass 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• Takeyour pick • @import compass/reset.sass • @import blueprint/reset.sass • @import yui/reset.sass
- 22.Putting it alltogether• Re-implement the Blueprint sample page: • Semantic HTML • All layout in CSS, not HTML classes • Using Sass mixins for Blueprint
- 24.@import blueprint/reset@import blueprint/modules/grid@importblueprint/modules/fancy_type+blueprint-typography+fancy-typeh2 +althr +colruler &.space +colspacer#frame +container
- 25.#box1 #box2 #box3 +column(7) +column(8) +column(7) +colborder +colborder +last
- 26.#content +column(15) +prepend(1) +colborder img +pull(1)
- 27.#nested1 #nested2 +column(7) +column(7) +colborder +last
- 28.#sidebar +column(7) +last h3 span +alt
- 29.Putting it alltogetherhtml, 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; }
- 31.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/
- 32.Questions?Thomas Reynolds @tdreyno tdreyno@gmail.comawardwinningfjords.com