Notes on SASS presentation - RailsConf 2011

SASS-notes.md

Use this format to assign variables:

$error-red: #911

Transformations:

background-color: lighten(red, 10%)

Functions:

Partials

• Begin with underscore, import with @import partial_name;
• You can also import a whole folder

Loops

Scope your selectors with custom body ids & classes

Parent reference

#parent {
  a {
    &:hover { }  //  
  }
}

Compass sprites

Mixins

@mixin hovered {
  text-decoration: none
  &:hover {
    text-decoreation: underline;
  }
}

#nav.a {
  @include hovered
}

Selector inheritance

.feedback {
  font-weight:bold;
}

.error {
  @extend .feedback;
  border-color: red;
}