Simplifying CSS With Sass

Simplifying CSS
with Sass
Thomas Reynolds
@tdreyno
tdreyno@gmail.com
awardwinningfjords.com

What are some
common problems?

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 {...}

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; }

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%; }

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

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

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

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: 1px solid black
background: blue

Variables
!border_color = #ccc
#example
:border= !border_color

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

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")

Common mixins
• The Compass Project implements
• YUI
• Blueprint
• 960.gs
• Browser reset, clearﬁx, horizontal lists,
sprites, custom bullet images & more

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%; }

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
• Using Sass mixins for Blueprint

@import blueprint/reset
@import blueprint/modules/grid
@import blueprint/modules/fancy_type

+blueprint-typography
+fancy-type

h2
+alt

hr
+colruler
&.space
+colspacer

#frame
+container

#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 {
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; }

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/

Questions?

Thomas Reynolds
@tdreyno
tdreyno@gmail.com
awardwinningfjords.com

Simplifying CSS With Sass

More Related Content

What's hot

Similar to Simplifying CSS With Sass

Recently uploaded

Simplifying CSS With Sass