Sass Placeholder Selectors

Last Updated:

Sass Placeholder Selectors

Sass Placeholder Selectors is used to extend the CSS properties, whenever necessary.

Placeholder Selectors always starts with a % and it's not included in the CSS output.

The following example will have no effect as we are not extending the placeholder selectors.

Example

SASS TO CSS CONVERTER
%make-strong{ font-weight: bold; } .alert{ color: red; }

Syntax

%anyName{ // css code }

Extending Placeholder Selectors

In the following example we are extending placeholder selectors with @extend At-Rule.

Example

SASS TO CSS CONVERTER
%make-strong{ font-weight: bold; } .alert{ @extend %make-strong; color: red; }

Extending Placeholder Selectors in Multiple Selectors

In the following example, we are extending the placeholder selectors in multiple selectors.

Example

SASS TO CSS CONVERTER
%make-strong{ font-weight: bold; } .alert{ @extend %make-strong; color: red; } .warning{ @extend %make-strong; color: blue; }

Share this Page

Meet the Author