Add guidance for Nested Properties

[maya]

We should add guidance on Sass nested properties.

Currently we encourage using shorthand only when all values are stated. See Property-value pairs: https://pages.18f.gov/frontend/css-coding-styleguide/format/

With Sass, we can also use Nested Properties.

CSS has quite a few properties that are in namespaces for instance, font-family, font-size, and font-weight are all in the font namespace. In CSS, if you want to set a bunch of properties in the same namespace, you have to type it out each time. Sass provides a shortcut for this: just write the namespace once, then nest each of the sub-properties within it. For example:

.18f {
  margin: {
    top: 2em;
    bottom: 1em;
  }
}

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

Do we encourage one over the other? Or just let people know both options are available?

[maya]

Sounds like we do not want to nest properties and favor writing them out fully.