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. 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
15. Consider the following CSS:
.rounded-corners {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
16. We’ll de ne this as a mixin:
=border-radius
:-webkit-border-radius 3px
:-moz-border-radius 3px
:border-radius 3px
17. Now we apply this mixin to a selector:
h2
:background red
:padding 3px
+border-radius
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. 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. 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. Regular mixin use (selector), override default (selector2)
#selector
+border-radius
// Override default border radius for this selector
#selector2
+border-radius("3px")
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. 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. 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. Another example. Let’s say we want to make an
element transparent. The CSS way:
h2 {
opacity: 0.5;
}
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. 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
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. Back to our example. In CSS you would do this:
h2 {
opacity: 0.5;
}
35. Then... fuck... have to support IE.
*Google to lookup code*
h2 {
opacity: 0.5;
filter: alpha(opacity="50");
}
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. 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.
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
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. !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)
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. 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. If Compass is part of your deployment process, your
live sites will always have mini ed CSS.
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.
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. Fork Compass on Github
http://github.com/chriseppstein/compass