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.



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.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?