Open In App

SASS | Placeholder Selectors

Improve
Improve
Like Article
Like
Save
Share
Report

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.


Last Updated : 11 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads