Sass % operator [duplicate]

Question

This question already has answers here:

'%' in SASS, what does it mean (3 answers)

Closed 4 years ago.

One of the developers where I work recently left and upon going through his sass code, I found this:

%centerAll {
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

I'd say I'm pretty experienced with sass but I've never see anything in Sass that uses the modulo operator like that. To make matters stranger, this "mixin" is included through the code as:

@extend %centerAll

and as far as I know, @extend is used for extending the properties of the class, via inheritance.

Has anyone ever seen this before?

Answer 1

This is a placeholder selector.

They 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.