How the extend feature works in the cascade.

_sass_placeholder_example.md

Sass' Silent Placeholder function works the same as normal CSS extending in the cascade

This example here illustrates how that Sass will extend a silent selector in the cascade the same way that a normal selector would. The only difference is that silent placehodlers are not processed into CSS until they are called into a selector that is processed into CSS.

Play with this in SassMeister to see how the processed CSS changes between the different selectors. http://sassmeister.com/gist/4512325

input.scss

// This example will illustrate how silent selectors manifest
// themselves the same way that normal selectors do
// when using Sass' extend feature. 



/* extended silent selectors */
/* ------------------------- */
// these selectors are never processed into CSS
%silent-button {
  background: #111;
  color: #fff;
  border: 0;
  padding: 0.5em 1em;
}
 
%silent-button-large {
  @extend %silent-button;
  font-size: 1.3em;
}
 
%silent-button-primary {
  @extend %silent-button;
  background: #27aae2;
}
 
%silent-button-primary-large {
  @extend %silent-button-primary;
  @extend %silent-button-large;
}

// using the silent selectors for the samantic selector
// this will cause the previously silent selectors 
// to be processed into CSS
.silent-download-whitepaper {
  @extend %silent-button-primary-large;
} 


/* extended normal selectors */
/* ------------------------- */
// these selectors will be processed into CSS
.button {
  background: #111;
  color: #fff;
  border: 0;
  padding: 0.5em 1em;
}
 
.button-large {
  @extend .button;
  font-size: 1.3em;
}
 
.button-primary {
  @extend .button;
  background: #27aae2;
}
 
.button-primary-large {
  @extend .button-primary;
  @extend .button-large;
}

// previously created selectors in the cascade are extend
// at their point of creation and processed into CSS
.download-whitepaper {
  @extend .button-primary-large;
}