'%' in SASS, what does it mean

Question

I saw this code, when i was checking Drupal Omega 4 theme

 %container {
  @include container;
  @include grid-background;
}

what does the '%container' mean? what is the '%' for?

Answer 1

It's a placeholder selector. It doesn't do anything on its own but can be extended, like an abstract base class.

Answer 2

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_

Placeholder Selectors: %foo

Sass supports a special type of selector called a “placeholder selector”. These look like class and id selectors, except the # or . is replaced by %. They’re meant to be used with the @extend directive; for more information see @extend-Only Selectors.

On their own, without any use of @extend, rulesets that use placeholder selectors will not be rendered to CSS.

Answer 3

SASS

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /* error specific styles... */
}

.info-icon {
  @extend %icon;
  /* info specific styles... */
}

Output

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

Note

Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.

More info

http://thesassway.com/intermediate/understanding-placeholder-selectors

Tools

If you want to play around Sass please use - http://sassmeister.com/