'%' 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

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

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.

Example

SCSS SYNTAX

%toolbelt {   box-sizing: border-box;   border-top: 1px rgba(#000, .12) solid;   padding: 16px 0;   width: 100%;    &:hover { border: 2px rgba(#000, .5) solid; } }  .action-buttons {   @extend %toolbelt;   color: #4285f4; }  .reset-buttons {   @extend %toolbelt;   color: #cddc39; } 

CSS Output

.action-buttons, .reset-buttons {   box-sizing: border-box;   border-top: 1px rgba(0, 0, 0, 0.12) solid;   padding: 16px 0;   width: 100%; } .action-buttons:hover, .reset-buttons:hover {   border: 2px rgba(0, 0, 0, 0.5) solid; }  .action-buttons {   color: #4285f4; }  .reset-buttons {   color: #cddc39; } 

Answer 2

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/