Your SlideShare is downloading. ×
0
DRY cross-browser CSS with SASS




Saturday, October 31, 2009
Speaker.new({
                    :name            =>   "Wes Oldenbeuving",
                    :twitter         =>   "@Na...
Web development
                               (With Ruby on Rails)




Saturday, October 31, 2009
DRY:
                   Don’t Repeat Yourself




                             http://www.flickr.com/photos/cmgramse/230123...
HTML
                       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                         "http://www....
HAML
                       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                         "http://www....
CSS
                    #linkList ul {
                      margin: 0;
                      padding: 0; }
              ...
SASS
  #linkList ul {
    margin: 0;
    padding: 0; }
  #linkList li {
    line-height: 2.5em;
    background: transparen...
Nesting

            #content                     #content {
              :border                      border-top: 1px so...
Variables
            // SASS                      /* CSS */

            !blue = #3bbfce              .content_navigation...
Mixins
            // Sass                            /* CSS */

            =table-scaffolding                 #data {
  ...
Output style: nested

                             sass -t nested mixins.sass
                                 #data {
   ...
Output style: expanded

                             sass -t expanded mixins.sass
                                   #data...
Output style: compact

                                   sass -t compact mixins.sass
                             #data {...
Output style: compressed

                             sass -t compressed mixins.sass
                #data{float:left;mar...
Cross-browser SASS
                          examples




                             http://www.nurweb.biz/?p=471

Satur...
Rounded borders

                     // Create rounded borders in all browsers that support them
                     =ro...
Opacity

     =opacity(!value)
       :opacity = !value
       :-ms-filter = "progid:DXImageTransform.Microsoft.Alpha(Opac...
Text-shadow

 // Note: This one requires some work to get the Direction working properly for IE.
 // Usage example: +text_...
Getting started with
                         SASS in Rails
                   run: gem install haml
                   in...
Less CSS, a SASS alternative

                   A CSS superset.
                   All of the cool SASS features, but wit...
Compass, a SASS
                               framework
                   SASS mixins to help with CSS frameworks like
 ...
Where to get SASS
                   Install: gem install haml
                   Website: http://sass-lang.com
          ...
Upcoming SlideShare
Loading in...5
×

DRY cross-browser CSS with SASS

5,188

Published on

My (Wes Oldenbeuving) presentation at RubyEnRails 2009 about using SASS, in particular SASS mixins.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,188
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
53
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "DRY cross-browser CSS with SASS"

  1. 1. DRY cross-browser CSS with SASS Saturday, October 31, 2009
  2. 2. Speaker.new({ :name => "Wes Oldenbeuving", :twitter => "@Narnach", :rubyist_since => "Early 2006", :works_as => "Freelance Rubyist", :code_at => "github.com/Narnach" }) Saturday, October 31, 2009
  3. 3. Web development (With Ruby on Rails) Saturday, October 31, 2009
  4. 4. DRY: Don’t Repeat Yourself http://www.flickr.com/photos/cmgramse/2301230228/ Saturday, October 31, 2009
  5. 5. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>FooBar corp.</title> </head> <body> <div id='header'> <h1>Welcome to FooBar corp.</h1> </div> <div id='content'> <!-- Content goes here --> </div> <div id='footer'>Copyright blah blah</div> </body> </html> Saturday, October 31, 2009
  6. 6. HAML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> !!! strict <title>FooBar corp.</title> %html </head> %head <body> %title FooBar corp. <div id='header'> %body <h1>Welcome to FooBar corp.</h1> #header </div> %h1 Welcome to FooBar corp. <div id='content'> #content <!-- Content goes here --> here / Content goes </div> #footer Copyright blah blah <div id='footer'>Copyright blah blah</div> </body> </html> Saturday, October 31, 2009
  7. 7. CSS #linkList ul { margin: 0; padding: 0; } #linkList li { line-height: 2.5em; background: transparent url(cr1.gif) no-repeat top center; display: block; padding-top: 5px; margin-bottom: 5px; list-style-type: none; } #linkList li a:link { color: #988F5E; } #linkList li a:visited { color: #B3AE94; } Saturday, October 31, 2009
  8. 8. SASS #linkList ul { margin: 0; padding: 0; } #linkList li { line-height: 2.5em; background: transparent url(cr1.gif) no-repeat top center; #linkList display: block; ul padding-top: 5px; :margin 0 margin-bottom: 5px; :padding 0 list-style-type: none; } li #linkList li a:link { :line-height 2.5em color: #988F5E; } :background transparent url(cr1.gif) no-repeat top center #linkList li a:visited { :display block color: #B3AE94; } :padding-top 5px :margin-bottom 5px :list-style-type none a &:link :color #988F5E &:visited :color #B3AE94 Saturday, October 31, 2009
  9. 9. Nesting #content #content { :border border-top: 1px solid red; :top 1px solid red border-left: 2px solid green; :left 2px solid green border-right: 3px dotted blue; :right 3px dotted blue border-bottom: none; :bottom none } Saturday, October 31, 2009
  10. 10. Variables // SASS /* CSS */ !blue = #3bbfce .content_navigation { !margin = 16px border-color: #3bbfce; color: #2aaebd; } .content_navigation :border-color = !blue .border { :color = !blue - #111 padding: 8px; margin: 8px; .border border-color: #3bbfce; } :padding = !margin / 2 :margin = !margin / 2 :border-color = !blue Saturday, October 31, 2009
  11. 11. Mixins // Sass /* CSS */ =table-scaffolding #data { th float: left; :text-align center margin-left: 10px; :font-weight bold } td, th #data th { :padding 2px text-align: center; font-weight: bold; =left(!dist) } :float left #data td, #data th { :margin-left = !dist padding: 2px; } #data +left(10px) +table-scaffolding Saturday, October 31, 2009
  12. 12. Output style: nested sass -t nested mixins.sass #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } Saturday, October 31, 2009
  13. 13. Output style: expanded sass -t expanded mixins.sass #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } Saturday, October 31, 2009
  14. 14. Output style: compact sass -t compact mixins.sass #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; } Saturday, October 31, 2009
  15. 15. Output style: compressed sass -t compressed mixins.sass #data{float:left;margin-left:10px}#data th{text-align:center;font- weight:bold}#data td,#data th{padding:2px} Saturday, October 31, 2009
  16. 16. Cross-browser SASS examples http://www.nurweb.biz/?p=471 Saturday, October 31, 2009
  17. 17. Rounded borders // Create rounded borders in all browsers that support them =rounded_borders(!color, !width = 5px, !rounding = 5px) :-moz-border-radius = !rounding !rounding :-webkit-border-radius = !rounding !rounding :-khtml-border-radius = !rounding !rounding :-o-border-radius = !rounding !rounding :border-radius = !rounding !rounding :border = !width !color "solid" #header +rounded_borders(green, 3px) Saturday, October 31, 2009
  18. 18. Opacity =opacity(!value) :opacity = !value :-ms-filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{!value*100})" :filter = "alpha(opacity=#{!value * 100})" #content +opacity(0.9) Saturday, October 31, 2009
  19. 19. Text-shadow // Note: This one requires some work to get the Direction working properly for IE. // Usage example: +text_shadow(#333, 1px, 1px, 1) =text_shadow(!color, !x, !y, !blur) :text-shadow = !color !x !y "#{!blur}px" :-ms-filter = "progid:DXImageTransform.Microsoft.Shadow(Color=#{!color},Direction=135,Strength=#{!blur})" Saturday, October 31, 2009
  20. 20. Getting started with SASS in Rails run: gem install haml in environment.rb: add config.gem ‘haml’ create public/stylesheets/sass/style.sass require ‘style.css’ in your layout script/server Saturday, October 31, 2009
  21. 21. Less CSS, a SASS alternative A CSS superset. All of the cool SASS features, but with semicolons and curly braces. http://lesscss.org/ Saturday, October 31, 2009
  22. 22. Compass, a SASS framework SASS mixins to help with CSS frameworks like Blueprint, YUI and 960.gs SASS mixins that solve common problems, like resetting the stylesheet and horizontal lists. http://wiki.github.com/chriseppstein/compass Saturday, October 31, 2009
  23. 23. Where to get SASS Install: gem install haml Website: http://sass-lang.com Develop: http://github.com/nex3/haml Also check out: http://haml-lang.com Community plug: http://dev-groups.org Saturday, October 31, 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×