Your SlideShare is downloading. ×
0
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.
...
Why Sass?
•   Your CSS is cleaner and easier to maintain
•   Much better separation of style and content
•   Separate les ...
Compass Compiler:




Recompiles your CSS every time you save your Sass.
project/src/              project/css/

screen.sass
     _reset.sass                         screen.css
     _typography.s...
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
             ...
1. Variables
2. Mixins
3. Imports
Consider the following CSS:


               .rounded-corners {
                   -webkit-border-radius: 3px;
           ...
We’ll de ne this as a mixin:


                =border-radius
                  :-webkit-border-radius 3px
               ...
Now we apply this mixin to a selector:


                       h2
                         :background red
              ...
Since CSS classes are the only way to abstract,
our HTML often looks like this:


<div id="content" class="clearfix col co...
Using Sass, we can keep it clean and semantic:



      <div id="content">
          <h2>Hello world</h2>
          <p>Lor...
Mixins can have arguments and defaults:


    !default_border_radius ||= 5px

    =border-radius(!radius = !default_border...
Regular mixin use (selector), override default (selector2)


    #selector
      +border-radius

    // Override default b...
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

!d...
Now we have access to a lot of mixins:

   Round all borders by a speci c amount   +border-radius

   Round top-left radiu...
These are the other CSS3 modules:

                   @import   css3/border_radius.sass
                   @import   css3/...
Another example. Let’s say we want to make an
element transparent. The CSS way:



                       h2 {
           ...
Opacity browser support (without speci c syntax)

             Safari 4                      Yes
             Safari 3    ...
Opacity browser support (with speci c syntax)

             Safari 4                      Yes
             Safari 3       ...
Source code for Compass Core CSS3 opacity mixin



=opacity(!opacity)
  opacity= !opacity
  -moz-opacity= !opacity
  -khtm...
Some interesting things going on here:



=opacity(!opacity)
  opacity= !opacity
  -moz-opacity= !opacity
  -khtml-opacity...
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;
    ...
WHAT? The syntax changed for IE8?
*Google again to lookup code*


           h2 {
                opacity: 0.5;
          ...
Hypothetically a new browser called Fuzzy hits the
browser market by a storm, and has a proprietary
syntax for opacity.


...
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 ...
Now... the better way.


     The Sass Way.
This is all we have to do to make the opacity code work:



                      @import compass/css3

                  ...
Sass/Compass compiles to:

   h2 {
       opacity: 0.5;
       -moz-opacity: 0.5;
       -khtml-opacity: 0.5;
       -ms-f...
Now, since we’re using a compiler so we can do other things we
couldn’t do before.


For example, outputting mini ed CSS b...
!blueprint_grid_columns = 8
Since Compass/Sass does          !blueprint_grid_width = 40px
arithmetic we can do grid       ...
A little side by side comparison:
!blueprint_grid_columns = 8    .two-col {
!blueprint_grid_width = 40px     width: 390px;...
Q: Why is the Sass code so much leaner?
               .two-col
                 +container
                 background-co...
We can create custom functions that extend Compass/Sass:

                         Decode image to base64 to save on HTTP
...
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.


...
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...
Fork Compass on Github
http://github.com/chriseppstein/compass
Read my blog
http://www.wolfslittlestore.be
johan@johanronsse.be
http://www.netlash.com
Upcoming SlideShare
Loading in...5
×

Better CSS with Compass/Sass

5,416

Published on

This presentation explains why Sass is the best way to write your CSS in an elegant and maintainable manner.

Published in: Technology
1 Comment
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,416
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
260
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide






















































  • Transcript of "Better CSS with Compass/Sass"

    1. 1. COMPASS/SASS Saturday 6th of March — Barcamp Antwerpen — Johan Ronsse
    2. 2. Hi! I’m Johan.
    3. 3. I work at Netlash, a web agency
    4. 4. I also run a tiny webdesign company
    5. 5. First things rst: Wat is Sass?
    6. 6. 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
    7. 7. 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
    8. 8. Compass Compiler: Recompiles your CSS every time you save your Sass.
    9. 9. 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
    10. 10. 1. Variables 2. Mixins 3. Imports
    11. 11. Consider the following CSS: body { background: #F1F5FA; }
    12. 12. We de ne the background color as a constant: !lightblue = #F1F5FA
    13. 13. We’ll use the following Sass to get the same output: !lightblue = #F1F5FA body :background = !lightblue
    14. 14. 1. Variables 2. Mixins 3. Imports
    15. 15. Consider the following CSS: .rounded-corners { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
    16. 16. We’ll de ne this as a mixin: =border-radius :-webkit-border-radius 3px :-moz-border-radius 3px :border-radius 3px
    17. 17. Now we apply this mixin to a selector: h2 :background red :padding 3px +border-radius
    18. 18. 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>
    19. 19. Using Sass, we can keep it clean and semantic: <div id="content"> <h2>Hello world</h2> <p>Lorem ipsum dolor sit amet...</p> </div>
    20. 20. 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
    21. 21. Regular mixin use (selector), override default (selector2) #selector +border-radius // Override default border radius for this selector #selector2 +border-radius("3px")
    22. 22. De ne once, reuse.
    23. 23. Someone makes a cool plugin:
    24. 24. Install plugin: sudo gem install fancy-buttons Require plugin: require 'fancy-buttons'
    25. 25. 1. Variables 2. Mixins 3. Imports
    26. 26. 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)
    27. 27. 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
    28. 28. 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
    29. 29. Another example. Let’s say we want to make an element transparent. The CSS way: h2 { opacity: 0.5; }
    30. 30. 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
    31. 31. 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
    32. 32. 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) + ")"
    33. 33. 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!
    34. 34. Back to our example. In CSS you would do this: h2 { opacity: 0.5; }
    35. 35. Then... fuck... have to support IE. *Google to lookup code* h2 { opacity: 0.5; filter: alpha(opacity="50"); }
    36. 36. WHAT? The syntax changed for IE8? *Google again to lookup code* h2 { opacity: 0.5; filter: alpha(opacity="50"); -ms-filter: "alpha(opacity=50)"; }
    37. 37. 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.
    38. 38. Update 59 websites I made since new browser? No!
    39. 39. 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
    40. 40. Now... the better way. The Sass Way.
    41. 41. This is all we have to do to make the opacity code work: @import compass/css3 h2 +opacity(50)
    42. 42. 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.
    43. 43. 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
    44. 44. !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)
    45. 45. 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; }
    46. 46. 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
    47. 47. 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!)
    48. 48. If Compass is part of your deployment process, your live sites will always have mini ed CSS.
    49. 49. 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.
    50. 50. gem update compass, recompile, done!
    51. 51. 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.)
    52. 52. Fork Compass on Github http://github.com/chriseppstein/compass
    53. 53. Read my blog http://www.wolfslittlestore.be
    54. 54. johan@johanronsse.be http://www.netlash.com
    1. A particular slide catching your eye?

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

    ×