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

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

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

Sass/SCSS #framework

‣ First Sass-based framework ‣ Provides tons of mixins ‣ Supports plugins

4

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

Full of Sass.Compass Modules

‣ CSS3 • Effects, Fonts, Content

‣ Typography • Test, Links, Lists

‣ Utilities • Sprites, Color, Print, Tables

‣ Layout* ‣ Reset*

6

CSS

CompassSass

7

Web Browser and/or Terminal Shell requiredDebugging

// Debug compiled CSS w/Firefox + Firebug + FireSass

environment = :development

firesass = true

!

// Debug dynamic Sass using @debug function

div {

@debug $anything + 1px;

}

8

Good looks are subjective.Formatting

.standard { color: $dark; background-color: $light;}!

.spacey { color : $dark; background-color : $light;}

9

Shorthand code is harder to read.Shortcuts

@mixin pretty-text {

color: $dark;

}

!

a {

@include light;

}

!

=pretty-text {

color: $dark;

}

!

a {

+light;

}

10