Configration

When we use compass to compile we need to setup the configration file call config.rb.

# Setup the directories
css_dir = "assets/stylesheets"
fonts_dir = "assets/fonts"
relative_assets = true

Variable

SASS variable just like the variable in other language.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

Mixin make it possible to pass the parameters in.

// Define mixin
@mixin icon($icon) {
  content: $icon;
}

// Use mixin
.button {
  @include icon(email) {
    margin-left: 10px;
  }
}

// @import a partial file name '_partial.scss'. 
@import "the/partial"

// Use a mixin by @include.
.div {
  @include a-mixin(10px)
}

SASS also provide @if, @for, @while to make complicated logic.

$list: adam john wynn mason kuroir

  @each $author in $list
    .photo-#{$author}
      background: image-url("avatars/#{$author}.png") no-repeat

@extend help to reuse the styling to another class.

@todo