Sass for CSS

1. Reusable snippets.
Sass Mixins
@mixin my-custom-mixin {
border: 1px solid $color;
padding: $padding;
}
!
// Use your mixin over and over again
.element {
@include my-custom-mixin;
}
1

2. Useful Mixins
@mixin font-primary {
font-family: “Hip Web Font”, Arial, sans-serif;
font-weight: 400;
}
!
// Use the mixin over and over again
.element {
@include font-primary;
}
2

3. Useful Mixins + Variables
$color-primary: #FFCC00;
@mixin font-primary {
font-family: “Hip Web Font”, Arial, sans-serif;
font-weight: 400;
}
!
// Use the mixin over and over again
.element {
@include font-primary;
color: $color-primary;
}
3

4. Sass/SCSS #framework
‣ First Sass-based framework
‣ Provides tons of mixins
‣ Supports plugins
4

5. I now can stop repeating myself. I now can stop repeating myself.
Compass Mixins
@include border-radius(...);
@include box-shadow(...);
@include text-shadow(...);
@include scale(...);
@include rotate(...);
@include transform2d(...);
@include transform3d(...);
5

6. Full of Sass.
Compass Modules
‣ CSS3
• Effects, Fonts, Content
‣ Typography
• Test, Links, Lists
‣ Utilities
• Sprites, Color, Print, Tables
‣ Layout*
‣ Reset*
6
CSS
Compass
Sass

7. 7

8. Web Browser and/or Terminal Shell required
Debugging
// Debug compiled CSS w/Firefox + Firebug + FireSass
environment = :development
firesass = true
!
// Debug dynamic Sass using @debug function
div {
@debug $anything + 1px;
}
8

9. Good looks are subjective.
Formatting
.standard {
color: $dark;
background-color: $light;
}
!
.spacey {
color : $dark;
background-color : $light;
}
9

10. Shorthand code is harder to read.
Shortcuts
@mixin pretty-text {
color: $dark;
}
!
a {
@include light;
}
!
=pretty-text {
color: $dark;
}
!
a {
+light;
}
10