DRY cross-browser CSS with SASS
Upcoming SlideShare
Loading in...5
×
 

DRY cross-browser CSS with SASS

on

  • 7,006 views

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

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

Statistics

Views

Total Views
7,006
Slideshare-icon Views on SlideShare
6,979
Embed Views
27

Actions

Likes
2
Downloads
50
Comments
0

3 Embeds 27

http://www.slideshare.net 21
https://www.linkedin.com 5
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DRY cross-browser CSS with SASS DRY cross-browser CSS with SASS Presentation Transcript

    • DRY cross-browser CSS with SASS Saturday, October 31, 2009
    • Speaker.new({ :name => "Wes Oldenbeuving", :twitter => "@Narnach", :rubyist_since => "Early 2006", :works_as => "Freelance Rubyist", :code_at => "github.com/Narnach" }) Saturday, October 31, 2009
    • Web development (With Ruby on Rails) Saturday, October 31, 2009
    • DRY: Don’t Repeat Yourself http://www.flickr.com/photos/cmgramse/2301230228/ Saturday, October 31, 2009
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Cross-browser SASS examples http://www.nurweb.biz/?p=471 Saturday, October 31, 2009
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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