Compass/Sass
Upcoming SlideShare
Loading in...5
×
 

Compass/Sass

on

  • 3,536 views

 

Statistics

Views

Total Views
3,536
Views on SlideShare
3,535
Embed Views
1

Actions

Likes
7
Downloads
63
Comments
1

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Compass/Sass Compass/Sass Presentation Transcript

  • COMPASS/SASS Saturday 6th of March — Barcamp Antwerpen — Johan Ronsse
  • Hi! I’m Johan.
  • I work at Netlash, a web agency
  • I also run a tiny webdesign company
  • First things rst: Wat is Sass?
  • Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax. Hampton Catlin Originally wrote Sass
  • Why Sass? • Your CSS is cleaner and easier to maintain • Much better separation of style and content • Separate les without performance loss • Automatic cross-browser CSS • Your CSS automatically gets mini ed
  • Compass Compiler: Recompiles your CSS every time you save your Sass.
  • project/src/ project/css/ screen.sass _reset.sass screen.css _typography.sass _structure.sass print.css _layout.sass compiler _ui_core.sass ie7.css _datagrid.sass _calendar.sass ie6.css print.sass ie6.sass ie7.sass
  • 1. Variables 2. Mixins 3. Imports
  • Consider the following CSS: body { background: #F1F5FA; }
  • We de ne the background color as a constant: !lightblue = #F1F5FA
  • We’ll use the following Sass to get the same output: !lightblue = #F1F5FA body :background = !lightblue
  • 1. Variables 2. Mixins 3. Imports
  • Consider the following CSS: .rounded-corners { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
  • We’ll de ne this as a mixin: =border-radius :-webkit-border-radius 3px :-moz-border-radius 3px :border-radius 3px
  • Now we apply this mixin to a selector: h2 :background red :padding 3px +border-radius
  • Since CSS classes are the only way to abstract, our HTML often looks like this: <div id="content" class="clearfix col col-4 p-col-2"> <h2 class="rounded-corners abs red">Hello world</h2> <p>Lorem ipsum dolor sit amet...</p> </div>
  • Using Sass, we can keep it clean and semantic: <div id="content"> <h2>Hello world</h2> <p>Lorem ipsum dolor sit amet...</p> </div>
  • Mixins can have arguments and defaults: !default_border_radius ||= 5px =border-radius(!radius = !default_border_radius) border-radius= !radius -moz-border-radius= !radius -webkit-border-radius= !radius
  • Regular mixin use (selector), override default (selector2) #selector +border-radius // Override default border radius for this selector #selector2 +border-radius("3px")
  • De ne once, reuse.
  • Someone makes a cool plugin:
  • Install plugin: sudo gem install fancy-buttons Require plugin: require 'fancy-buttons'
  • 1. Variables 2. Mixins 3. Imports
  • Let’s say we often use border-radius in our projects. We’ll import the Compass Core CSS3 module: @import compass/css3 !default_border_radius ||= 5px // Round top-right radius only =border-radius(!radius = !default_border_radius) border-radius= !radius =border-top-right-radius(!radius = !default_border_radius) -moz-border-radius= !radius +border-corner-radius("top", "right", !radius) -webkit-border-radius= !radius // // Round bottom-left radius only Round all borders by a specific amount, defaults to value of !default_border_radius =border-bottom-left-radius(!radius = !default_border_radius) =border-radius(!radius = !default_border_radius) +border-corner-radius("bottom", "left", !radius) border-radius= !radius -moz-border-radius= !radius // -webkit-border-radius= !radius Round bottom-right radius only // =border-bottom-right-radius(!radius = !default_border_radius) Round radius at position by amount. +border-corner-radius("bottom", "right", !radius) * values for !vert: "top", "bottom" // Round top corners by amount * values for !horz: "left", "right" =border-top-radius(!radius = !default_border_radius) +border-top-left-radius(!radius) =border-corner-radius(!vert, !horz, !radius = !default_border_radius) +border-top-right-radius(!radius) border-#{!vert}-#{!horz}-radius= !radius -moz-border-radius-#{!vert}#{!horz}= !radius // Round right corners by amount -webkit-border-#{!vert}-#{!horz}-radius= !radius =border-right-radius(!radius = !default_border_radius) +border-top-right-radius(!radius) // +border-bottom-right-radius(!radius)
  • Now we have access to a lot of mixins: Round all borders by a speci c amount +border-radius Round top-left radius only +border-top-left-radius Round top-right radius only +border-top-right-radius Round bottom-left radius only +border-bottom-left-radius Round bottom-right radius only +border-bottom-right-radius Round top corners by amount +border-top-radius Round right corners by amount +border-right-radius Round bottom corners by amount +border-bottom-radius Round left corners by amount +border-left-radius
  • These are the other CSS3 modules: @import css3/border_radius.sass @import css3/inline_block.sass @import css3/opacity.sass @import css3/box_shadow.sass @import css3/text_shadow.sass @import css3/columns.sass @import css3/box_sizing.sass @import css3/gradient.sass @import css3/background_clip.sass @import css3/background_origin.sass @import css3/background_size.sass @import css3/font_face.sass @import css3/transform.sass @import css3/transition.sass
  • Another example. Let’s say we want to make an element transparent. The CSS way: h2 { opacity: 0.5; }
  • Opacity browser support (without speci c syntax) Safari 4 Yes Safari 3 Yes Google Chrome (latest) Yes Firefox 3+ Yes Firefox 2 No Opera (latest) Yes Internet Explorer 8 No Internet Explorer 7 No Internet Explorer 6 No
  • Opacity browser support (with speci c syntax) Safari 4 Yes Safari 3 Yes Google Chrome (latest) Yes Firefox 3+ Yes Firefox 2 Yes Opera (latest) Yes Internet Explorer 8 Yes Internet Explorer 7 Yes Internet Explorer 6 Yes
  • Source code for Compass Core CSS3 opacity mixin =opacity(!opacity) opacity= !opacity -moz-opacity= !opacity -khtml-opacity= !opacity -ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")" filter= "alpha(opacity=" + round(!opacity*100) + ")"
  • Some interesting things going on here: =opacity(!opacity) opacity= !opacity -moz-opacity= !opacity -khtml-opacity= !opacity -ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")" filter= "alpha(opacity=" + round(!opacity*100) + ")" round() function arithmetic!
  • Back to our example. In CSS you would do this: h2 { opacity: 0.5; }
  • Then... fuck... have to support IE. *Google to lookup code* h2 { opacity: 0.5; filter: alpha(opacity="50"); }
  • WHAT? The syntax changed for IE8? *Google again to lookup code* h2 { opacity: 0.5; filter: alpha(opacity="50"); -ms-filter: "alpha(opacity=50)"; }
  • Hypothetically a new browser called Fuzzy hits the browser market by a storm, and has a proprietary syntax for opacity. h2 { -fuzzy-opacity: "alpha(50)"; } Almost all of your websites are broken now.
  • Update 59 websites I made since new browser? No!
  • Things that are wrong here: • Copy/pasting the same code for the nth time • Breaking your work ow by going to another site • Have to remember all weird browser inconsistencies • Code might break in the future
  • Now... the better way. The Sass Way.
  • This is all we have to do to make the opacity code work: @import compass/css3 h2 +opacity(50)
  • Sass/Compass compiles to: h2 { opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); } Code that works, cross-browser.
  • Now, since we’re using a compiler so we can do other things we couldn’t do before. For example, outputting mini ed CSS by default: output_style = :compressed
  • !blueprint_grid_columns = 8 Since Compass/Sass does !blueprint_grid_width = 40px arithmetic we can do grid @import blueprint calculations. This is the code .two-col you need to create a two +container background-color: #ccc column grid, using the #header, #footer +column(8) Compass port of Blueprint: #sidebar +column(3) #content +column(5, true)
  • A little side by side comparison: !blueprint_grid_columns = 8 .two-col { !blueprint_grid_width = 40px width: 390px; margin: 0 auto; @import blueprint overflow: hidden; display: inline-block; .two-col background-color: #ccc; +container } background-color: #ccc .two-col { #header, #footer display: block; +column(8) } #sidebar .two-col #header, .two-col #footer { +column(3) display: inline; #content float: left; +column(5, true) margin-right: 10px; width: 390px; } * html .two-col #header, * html .two-col #footer { overflow-x: hidden; } .two-col #sidebar { display: inline; float: left; margin-right: 10px; width: 140px; } * html .two-col #sidebar { overflow-x: hidden; } .two-col #content { display: inline; float: left; margin-right: 0; width: 240px; } * html .two-col #content { overflow-x: hidden; }
  • Q: Why is the Sass code so much leaner? .two-col +container background-color: #ccc #header, #footer +column(8) #sidebar +column(3) #content +column(5, true) A: it relies on whitespace, just like Ruby and Python
  • We can create custom functions that extend Compass/Sass: Decode image to base64 to save on HTTP inline_images() requests (non IE only) Part of Compass colors plugin: this darken(10) example darkens a color by 10% (and save us time!) (and make our websites better!)
  • If Compass is part of your deployment process, your live sites will always have mini ed CSS.
  • Hypothetically a new browser called Fuzzy hits the browser market by a storm, and has a proprietary syntax for opacity. h2 { -fuzzy-opacity: "alpha(75)"; } Almost all of your websites are broken now.
  • gem update compass, recompile, done!
  • Theory: Assuming you use a version control system, with a branch re ecting the live site, have good deployment strategy, you can effectively patch your 92 websites in less than 10 minutes. (Of course, something will go wrong.)
  • Fork Compass on Github http://github.com/chriseppstein/compass
  • Read my blog http://www.wolfslittlestore.be
  • johan@johanronsse.be http://www.netlash.com