SlideShare a Scribd company logo
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 {...}
         #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
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: 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
Common mixins
• The Compass Project implements
 • YUI
 • Blueprint
 • 960.gs
 • Browser reset, clearfix, 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

More Related Content

What's hot

SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
Itai Koren
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
Claudina Sarahe
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
Dimitar Belchugov
 
Sass
SassSass
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
 
Stylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and CompassStylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and Compass
Dave Ross
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
Steve Krueger
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
Gabriel Neutzling
 
Theme 23
Theme 23Theme 23
Theme 23
bellaandzendaya
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
 
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrBeyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Jens-Christian Fischer
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Mediacurrent
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectors
daniel_sternlicht
 
CSS and Layout
CSS and LayoutCSS and Layout
CSS and Layout
Jussi Pohjolainen
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
Lea Verou
 
Css web side
Css web sideCss web side
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
Andrea Tarr
 

What's hot (19)

SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
Sass
SassSass
Sass
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Stylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and CompassStylesheets of the future with Sass and Compass
Stylesheets of the future with Sass and Compass
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASS
 
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IVSass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
 
Theme 23
Theme 23Theme 23
Theme 23
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehrBeyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
Beyond HTML - Scriptsprachen, Frameworks, Templatesprachen und vieles mehr
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectors
 
CSS and Layout
CSS and LayoutCSS and Layout
CSS and Layout
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
 
Css web side
Css web sideCss web side
Css web side
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS Preprocessor
 

Similar to Simplifying CSS With Sass

Demystifying CSS & WordPress
Demystifying CSS & WordPressDemystifying CSS & WordPress
Demystifying CSS & WordPress
Justin Carmony
 
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2
cori0506
 
autotraderbackground115433.jpgautotraderbackgroundaction.docx
autotraderbackground115433.jpgautotraderbackgroundaction.docxautotraderbackground115433.jpgautotraderbackgroundaction.docx
autotraderbackground115433.jpgautotraderbackgroundaction.docx
ikirkton
 
Cloudstack UI Customization
Cloudstack UI CustomizationCloudstack UI Customization
cssstyle.cssbody { font-family Montserrat, Arial, sa
cssstyle.cssbody {    font-family Montserrat, Arial, sacssstyle.cssbody {    font-family Montserrat, Arial, sa
cssstyle.cssbody { font-family Montserrat, Arial, sa
MargenePurnell14
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.no
Hannee92
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
 
Simplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and NibSimplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and Nib
Christian Joudrey
 
This is a test
This is a testThis is a test
This is a test
cmailhotos4
 
Chapter 6 TemplateWeek 6csshomework.css html {.docx
Chapter 6 TemplateWeek 6csshomework.css  html {.docxChapter 6 TemplateWeek 6csshomework.css  html {.docx
Chapter 6 TemplateWeek 6csshomework.css html {.docx
robertad6
 
My discussion Student A A8 - Cross-Site Request Forgery (CSR.docx
My discussion Student A A8 - Cross-Site Request Forgery (CSR.docxMy discussion Student A A8 - Cross-Site Request Forgery (CSR.docx
My discussion Student A A8 - Cross-Site Request Forgery (CSR.docx
gilpinleeanna
 
Css 3
Css 3Css 3
Css
CssCss
Css 2
Css 2Css 2
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docxWeek ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
philipnelson29183
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
Samay16
 
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxExpress HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
ssuser454af01
 
Harendra Singh,BCA Third Year
Harendra Singh,BCA Third YearHarendra Singh,BCA Third Year
Harendra Singh,BCA Third Year
dezyneecole
 
Learn to Love CSS3 [English]
Learn to Love CSS3 [English]Learn to Love CSS3 [English]
Learn to Love CSS3 [English]
ThemePartner
 
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandLearn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
ThemePartner
 

Similar to Simplifying CSS With Sass (20)

Demystifying CSS & WordPress
Demystifying CSS & WordPressDemystifying CSS & WordPress
Demystifying CSS & WordPress
 
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2
 
autotraderbackground115433.jpgautotraderbackgroundaction.docx
autotraderbackground115433.jpgautotraderbackgroundaction.docxautotraderbackground115433.jpgautotraderbackgroundaction.docx
autotraderbackground115433.jpgautotraderbackgroundaction.docx
 
Cloudstack UI Customization
Cloudstack UI CustomizationCloudstack UI Customization
Cloudstack UI Customization
 
cssstyle.cssbody { font-family Montserrat, Arial, sa
cssstyle.cssbody {    font-family Montserrat, Arial, sacssstyle.cssbody {    font-family Montserrat, Arial, sa
cssstyle.cssbody { font-family Montserrat, Arial, sa
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.no
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
Simplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and NibSimplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and Nib
 
This is a test
This is a testThis is a test
This is a test
 
Chapter 6 TemplateWeek 6csshomework.css html {.docx
Chapter 6 TemplateWeek 6csshomework.css  html {.docxChapter 6 TemplateWeek 6csshomework.css  html {.docx
Chapter 6 TemplateWeek 6csshomework.css html {.docx
 
My discussion Student A A8 - Cross-Site Request Forgery (CSR.docx
My discussion Student A A8 - Cross-Site Request Forgery (CSR.docxMy discussion Student A A8 - Cross-Site Request Forgery (CSR.docx
My discussion Student A A8 - Cross-Site Request Forgery (CSR.docx
 
Css 3
Css 3Css 3
Css 3
 
Css
CssCss
Css
 
Css 2
Css 2Css 2
Css 2
 
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docxWeek ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
Week ThreeExpress Holidayscssstyle.csshtml{ height 100.docx
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
 
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxExpress HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
 
Harendra Singh,BCA Third Year
Harendra Singh,BCA Third YearHarendra Singh,BCA Third Year
Harendra Singh,BCA Third Year
 
Learn to Love CSS3 [English]
Learn to Love CSS3 [English]Learn to Love CSS3 [English]
Learn to Love CSS3 [English]
 
Learn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day DeutschlandLearn to love CSS3 | Joomla! Day Deutschland
Learn to love CSS3 | Joomla! Day Deutschland
 

Recently uploaded

AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 

Recently uploaded (20)

AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 

Simplifying CSS With Sass

  • 1. Simplifying CSS with Sass Thomas Reynolds @tdreyno tdreyno@gmail.com awardwinningfjords.com
  • 3. Who writes a lot of CSS?
  • 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
  • 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")
  • 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.
  • 24. @import blueprint/reset @import blueprint/modules/grid @import blueprint/modules/fancy_type +blueprint-typography +fancy-type h2 +alt hr +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 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; }
  • 30.
  • 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.com awardwinningfjords.com