Skip to content
Related Articles

Related Articles

Improve Article

SASS | Placeholder Selectors

  • Difficulty Level : Easy
  • Last Updated : 11 Oct, 2019

Placeholder is another special kind of selector. It is used when you are writing your own SASS library. Its work is very similar to mixin without arguments.

Placeholder selector starts with a % sign.

Syntax:

%( name_of_selector ) { property: value; ... }

Placeholder selectors are excluded in the compilation of the SASS file ( This defines the main functionality of it. See the ‘Use of Placeholder selector’ below ). So the question is: How to use it?

To use the Placeholder selector, we use @extend at-rule.



Syntax:

@extend %( name_of_selector );

Example:

SASS file:

%button-format {
    padding: 10px 20px;
    border-radius: 15px;
    color: black;
}

.toolbar-button {
    @extend %button-format;
    background-color: lightpink;

    &:hover {
        background-color: rgb(155, 106, 114);
    }
}

.status-bar-button {
    @extend %button-format;
    background-color: lightblue;

    &:hover {
        background-color: blue;
    }
}

Compiled CSS file:

.status-bar-button, .toolbar-button {
    padding: 10px 20px;
    border-radius: 15px;
    color: black;
  }
  
  .toolbar-button {
    background-color: lightpink;
  }
  .toolbar-button:hover {
    background-color: #9b6a72;
  }
  
  .status-bar-button {
    background-color: lightblue;
  }
  .status-bar-button:hover {
    background-color: blue;
  }

Use of Placeholder Selector:
Placeholder selector is excluded in the compilation of the SASS file, therefore it is used to create SASS library. We can predefine some templates using it and then we can use it by @extend at-rule whenever we want, as shown in the above example.

My Personal Notes arrow_drop_up
Recommended Articles
Page :