Sass and Compass for Designers

Reviewing CSS code

Although when authoring styles in Sass it's probable you will spend less time looking at the resultant CSS, that does not mean you shouldn't review the CSS periodically. Why is this necessary?

For me, principally, it is because with the nesting capability of Sass, sometimes the depth of the generated CSS selector is not obvious from a cursory glance at the Sass file. To exemplify this, currently here is the block of code for the list of chapter summaries that run down the left side on larger viewports:

.chapter-summary {
  a {
    @extend %block;
    padding: .5em;
    color: $color10;
    opacity: .8;
    border: none;
    &:hover {
      opacity: 1;
    }
    &:visited {
      opacity: .9;
    }
    b {
      @extend %block;
    }
    span {
      @extend %block;
      font-size: .8em;
    }
  }
}

Now, that does ...