In SCSS, what does % symbol indicate?

Question

What does % indicate in scss?

Use of % in context: (source: https://codepen.io/FWeinb/pen/GrpqB?editors=1100)

@import "compass/css3";

.box{
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  line-height: 10em;
  overflow: hidden;
}

%box__dir{
  position: absolute;
  width: inherit;
  height: inherit;          
  text-align: center;
  line-height: inherit;
  transition:transform .4s ease;
}

What does the percentage sign before "box_dir" indicate?

Answer 1

In SCSS, the % indicates a placeholder selector.

[Placeholders] are very similar to class selectors, but instead of using a period (.) at the start, the percent character (%) is used. 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.

So if you included this in your SCSS somewhere but never used (extended) it, it will not appear in your generated CSS.

%box__dir {
 position:absolute;
 width:inherit;
 height:inherit;
 text-align:center;
 line-height:inherit;
 transition:transform .4s ease;
}

Once you use the placeholder, it will appear in your generated CSS as expected.

.something {
  color: red;
  @extend %box__dir;
}

Generated CSS:

.something {
  color: red;
  position:absolute;
  width:inherit;
  height:inherit;
  text-align:center;
  line-height:inherit;
  transition:transform .4s ease;
}