m

Sass & Compass For Designers

i

Chapter 3 Understanding Nesting, Extend, Placeholders and Mixins

In this chapter of the Sass and Compass book, 'Sass and Compass for Designers' you will master the workhorse techniques of Sass and get familiar with just some of Compass's incredible mixins.

Sass allows rules to be nested within one another. You'll learn not just how to use this technique but also when you shouldn’t. You'll also learn how nesting can be used in tandem with the Sass 'parent' selector and Modernizr to create easy 'forks' in CSS.

Use the parent selector to create forks with Modernizr

.button {
  height: 25px;
  .touch & {
    height: 44px;
  }
}

You'll learn how to '@extend' previous rules and also create placeholder selectors so that oft used snippets can be extended only when needed (if that doesn’t make sense now, don’t worry, it will when you read it I promise).

Extend existing rules

.first-selector {
  // I do things
}
.second-selector {
  @extend .first-selector;
  // I now do the first selector things too
  // Plus any additional things...
}

Placeholder selectors

// Box
%box {
  padding: 2em;
  color: $color10;
  background-color: $color11;
}
// Warning Box
.warning-box {
  @extend %box;
  border: 2px dotted $color1;
}
// Success Box
.success-box {
  @extend %box;
  border: 2px dotted $color4;
}

Finally you'll get an explanation of mixins. What they are, how they work and how to write your own mixin.

Learn how to write & use 'mixins':

@mixin bs($bs-type: border-box) {
  -webkit-box-sizing: $bs-type;
  -moz-box-sizing: $bs-type;
  box-sizing: $bs-type;
}

With the nesting, @extending and mixins covered, it's time to manipulate some color. If you're used to using a color picker to manipulate colors, be warned. This may blow your mind.

Errata

In Chapter 3, the sentence (Page 69 of the printed book) that reads: "When @font-face support is missing, Modernizr adds a class of .no-font-face to the HTML", should actually read: "When @font-face support is missing, Modernizr adds a class of .no-fontface to the HTML element."