Basics

Compass and SASS are fairly easy to grasp, but I am making a few basic assumptions about your working environment.

Assumptions

  • You are developing on a Mac
  • Ruby is installed.
  • Compass is installed sudo gem install chriseppstein-compass
  • You know your way around CSS

Getting Started

  1. create a project directory
  2. create an html file that you're going to start with
    • focus on minimizing (or eliminating) presentational classnames in your markup .left, .right, .clearfix, .span-15, .column etc...
  3. create a folder structure with compass
    • with a framework: compass -f blueprint myProject
    • or sans framework: compass myProject
  4. tell compass to "watch your directory" compass -w myProject

Nesting

if you've written css for a while, this should come naturally

.nav
    margin: 0px
    +no-bullets
    font-size: 1.2em
    a
      +hover-link
      display: block
      &:before
        content: " >>>"
  • & character
    • refers to the parent selector 1 level up
    • & newSelector, or newSelector &

Variables

  • assignment
    • !var = value
  • usage
    • css-property = !var
  • examples
    • !theme_dark_base = #4c4c32
!theme_medium_base = #b2b28f
!theme_light_base = #f2ffcc
!theme_accent = #a6bf00
!theme_complement = #73e5c3
!light_gray = #ccc

background = !theme_medium_base

Equations

  • why?
    • saves you time, no opening photoshop, fireworks or a calculator for conversions :)
  • colors
    • !lighter = lighten(!base_color)
    • lighten(), darken(), complement()
  • unit math (pixels to ems to percentages and back :)
    • !grid_spacing_ems = !grid_spacing / 2em
    • !small_header_width = !header_width - 30%

Mixins (aka Functions)

  • why?
    • reduce strain on your wrists typing -webkit-border-top-left-radius over and over (or any other complex different-across-multiple-browser css property)
    • abstract away browser differences and hacks so you don't have to type them again, move beyond the fixes and focus on efficiency
    • reduce errors, it's easy to forget what hacks apply to which browser
      • code once, implement multiple times vs. code multiple times implement multiple times
  • declaration
    • function
    • function(param = defaultValue)
    • examples!
  • usage
    • +mixin
    • +mixin(param1, param2)
    • example 
        =rounded(!radius = 10px, !corners = "all")
  @if !corners == "all"
    :border-radius = !radius
    :-webkit-border-radius = !radius
    :-moz-border-radius = !radius
  
  @if !corners == "right"
    :border-radius = !radius !radius 0px 0px
    :-moz-border-radius-topright = !radius
    :-moz-border-radius-bottomright = !radius
    :-webkit-border-top-right-radius = !radius
    :-webkit-border-bottom-right-radius = !radius
    
  etc....
time for more? advanced stuff ahead...