SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
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
Simplifying CSS With Sass
@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; }
Simplifying CSS With Sass
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

Mais conteúdo relacionado

Mais procurados

SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai 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 CompassClaudina Sarahe
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien 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 CompassDave Ross
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
Pacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSPacific Northwest Drupal Summit: Basic & SASS
Pacific Northwest Drupal Summit: Basic & SASSSteve 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 IVDirk Ginader
 
Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.Gabriel Neutzling
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco 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 mehrJens-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 SassMediacurrent
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectorsdaniel_sternlicht
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3Lea Verou
 
LESS, the CSS Preprocessor
LESS, the CSS PreprocessorLESS, the CSS Preprocessor
LESS, the CSS PreprocessorAndrea Tarr
 

Mais procurados (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
 

Semelhante a Simplifying CSS With Sass

Demystifying CSS & WordPress
Demystifying CSS & WordPressDemystifying CSS & WordPress
Demystifying CSS & WordPressJustin Carmony
 
Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2Corilennyg gmail-com-rsp2
Corilennyg gmail-com-rsp2cori0506
 
autotraderbackground115433.jpgautotraderbackgroundaction.docx
autotraderbackground115433.jpgautotraderbackgroundaction.docxautotraderbackground115433.jpgautotraderbackgroundaction.docx
autotraderbackground115433.jpgautotraderbackgroundaction.docxikirkton
 
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, saMargenePurnell14
 
Bloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noBloggdesign #2 - hawaa.blogg.no
Bloggdesign #2 - hawaa.blogg.noHannee92
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
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 NibChristian Joudrey
 
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 {.docxrobertad6
 
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.docxphilipnelson29183
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptxSamay16
 
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxExpress HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docx
Express HolidaysExpress Holidaysabout.htmlHomeAbout UsDestin.docxssuser454af01
 
Harendra Singh,BCA Third Year
Harendra Singh,BCA Third YearHarendra Singh,BCA Third Year
Harendra Singh,BCA Third Yeardezyneecole
 
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 DeutschlandThemePartner
 
CSS3 Tips & Techniques
CSS3 Tips & TechniquesCSS3 Tips & Techniques
CSS3 Tips & TechniquesUIEpreviews
 

Semelhante a 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
 
Css 3
Css 3Css 3
Css 3
 
Css 2
Css 2Css 2
Css 2
 
Css
CssCss
Css
 
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
 
CSS3 Tips & Techniques
CSS3 Tips & TechniquesCSS3 Tips & Techniques
CSS3 Tips & Techniques
 

Último

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 

Último (20)

Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 

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