DRY cross-browser CSS with SASS

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"
})


Web development
(With Ruby on Rails)


DRY:
Don’t Repeat Yourself

http://www.ﬂickr.com/photos/cmgramse/2301230228/


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'>

</div>
<div id='footer'>Copyright blah blah</div>
</body>
</html>

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
 here
/ Content goes
</div> #footer Copyright blah blah
<div id='footer'>Copyright blah blah</div>
</body>
</html>

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


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


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 }


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


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


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


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


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


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}


Cross-browser SASS
examples

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


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)


Opacity

=opacity(!value)
:opacity = !value
:-ms-filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{!value*100})"
:filter = "alpha(opacity=#{!value * 100})"

#content
+opacity(0.9)


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})"


Getting started with
SASS in Rails
run: gem install haml
in environment.rb: add conﬁg.gem ‘haml’
create public/stylesheets/sass/style.sass
require ‘style.css’ in your layout
script/server


Less CSS, a SASS alternative

A CSS superset.
All of the cool SASS features, but with
semicolons and curly braces.
http://lesscss.org/


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


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


DRY cross-browser CSS with SASS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (11)

Similaire à DRY cross-browser CSS with SASS

Similaire à DRY cross-browser CSS with SASS (20)

Dernier

Dernier (20)

DRY cross-browser CSS with SASS