SASS | Placeholder Selectors

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

I am doing BTech at Dhirubhai Ambani Institute of Information and Communication Technology

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.