Skip to Content
Learn
Sustainable SCSS
%Placeholders

Sometimes, you may create classes solely for the purpose of extending them and never actually use them inside your HTML.

Sass anticipated this and allows for a special type of selector called a placeholder, which behaves just like a class or id selector, but use the % notation instead of # or .

Placeholders prevent rules from being rendered to CSS on their own and only become active once they are extended anywhere an id or class could be extended.

a%drink { font-size: 2em; background-color: $lemon-yellow; } .lemonade { @extend %drink; //more rules }

would translate to

a.lemonade { font-size: 2em; background-color: $lemon-yellow; } .lemonade { //more rules }

Placeholders are a nice way to consolidate rules that never actually get used on their own in the HTML.

Instructions

1.

Notice how we never actually use .absolute anywhere in the HTML? Remove it from main.scss and place it inside helper/_placeholders.scss:

%absolute{ position: absolute; }

Now replace your old extend line with the placeholder extend notation:

@extend %absolute;

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Folder Icon

Sign up to start coding

Already have an account?