Embed Size (px)
DESCRIPTION
My (Wes Oldenbeuving) presentation at RubyEnRails 2009 about using SASS, in particular SASS mixins.
Citation preview
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> <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>
!!! strict%html %head %title FooBar corp. %body #header %h1 Welcome to FooBar corp. #content / Content goes here #footer Copyright blah blah
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; display: block; padding-top: 5px; margin-bottom: 5px; list-style-type: none; } #linkList li a:link { color: #988F5E; } #linkList li a:visited { color: #B3AE94; }
#linkList ul :margin 0 :padding 0 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 a &:link :color #988F5E &:visited :color #B3AE94
Saturday, October 31, 2009
Nesting
#content :border :top 1px solid red :left 2px solid green :right 3px dotted blue :bottom none
#content { border-top: 1px solid red; border-left: 2px solid green; border-right: 3px dotted blue; border-bottom: none;}
Saturday, October 31, 2009
Variables
// SASS
!blue = #3bbfce!margin = 16px
.content_navigation :border-color = !blue :color = !blue - #111
.border :padding = !margin / 2 :margin = !margin / 2 :border-color = !blue
/* CSS */
.content_navigation { border-color: #3bbfce; color: #2aaebd; }
.border { padding: 8px; margin: 8px; border-color: #3bbfce; }
Saturday, October 31, 2009
Mixins/* CSS */
#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}
// Sass
=table-scaffolding th :text-align center :font-weight bold td, th :padding 2px
=left(!dist) :float left :margin-left = !dist
#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
#data { float: left; margin-left: 10px; }#data th { text-align: center; font-weight: bold; }#data td, #data th { padding: 2px; }
sass -t compact mixins.sass
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
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
Getting started with SASS in Rails
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
