From the official📚 Sass documentation

Sass has a special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it's not included in the CSS output. In fact, any complex selector (the ones between the commas) that even contains a placeholder selector isn't included in the CSS, nor is any style rule whose selectors all contain placeholders.

We can write a placeholder for reusable pieces of code prefixed by the% keyword:

// colors.scss%colors-per-viewport{background:red;@media(min-width:768px){background:blue;}}

and call the placeholder using the syntax@extend %[placeholder-name]

// component.scss.colors{@extend%colors-per-viewport;}

CSS output:

.colors{background:red;}@media(min-width:768px){.colors{background:blue;}}

As seen above, we could also declare a code snippet with mediaquery inside.

The small matter

Unfortunately, we cannot call a placeholder declarationinside a mediaquery 😩

For instance, if we try to declare two placeholders and call them inside a media query

%colors-mobile{background:yellow;}%colors-tablet{background:green;}

.colors-viewport{@extend%colors-mobile;// ok!@media(min-width:768px){@extend%colors-tablet;// nope!}}

The code above will throw an error 😭

You may not @extend an outer selector from within @media.You may only @extend selectors within the same directive.

So, if we really need to reuse a code snipped inside a mediaquery, we can use amixin declaration.

I know, it is not the correct use of themixin function... but it's a desperate measure! 😅

@mixincolors-mobile{background:yellow;}@mixincolors-tablet{background:green;}

.colors-viewport{@includecolors-mobile;// ok!@media(min-width:768px){@includecolors-tablet;// yasss!}}

📚 More info

• Sass lang - placeholder selectors
• Sass - mixin or placeholder