Sass 101 - A newb's guide: Nesting

nesting.md

CSS nesting. Whereas CSS requires that you duplicate the series of selectors for nesting, Sass allows selectors to be truly nested within one another. As selectors and rules are nested within each other, the inner rule only applies within the outer rule’s selector.

SCSS requires the use of curly-brackets {} to separate nested selectors and semi-colons ; to separate rules.

It should be noted that with SCSS tabbing is not necessary as the curly-brackets {} and semi-colons ; do all the work. But it is highly recommended for readability.

.your_new_class {
  background: orange;
  p {
    font: {
      weight: bold;
      size: 14px;
      family: times;
    };
  }
}

Sass' original 'white-space' syntax simply uses returns to separate selector blocks and a 'two-spaced' tab to designate nesting. There is no need for {} to separate nested selectors and semi-colons ;.

In both syntaxes, using a colon : is necessary to separate CSS attribute from it's value.

.your_new_class
  background: orange
  p
    font:
      weight: bold
      size: 14px
      family: times

SassMeister Gist

nesting.scss

.your_new_class {
  background: orange;
  p {
    font: {
      weight: bold;
      size: 14px;
      family: times;
    };
  }
}