using placeholders

Hey Gerald Susanteo,

I will try my best to break this down into small sections so you can fully understand the terms.

@extend directive allows classes to share the set of properties with one another. This directive can be useful if you have similarly styled elements that only differ in some small details. This helps to keep your Sass code very DRY.

For example:

SASS:

.button{
border: none;
padding: 10px
cursor: pointer;
}

.button-submit {
@extend .button;
background-color: green;
}

CSS Output:

.button, .button-submit {
border: none;
padding: 10px
cursor: pointer;
}

.button-submit {
background-color: green;
}

As you can see in the above example, .button-submit will inherit all the CSS properties from the .button class through @extend directive. But .button class has appeared on CSS output and to make it not appear in a final version of CSS we use placeholder.

placeholder is a special kind of selector and it acts a lot like CSS selector and it starts with a % that won't appear in the CSS output unless @extend them. I will show you how this works by using the same above example.

SASS:

%button{
border: none;
padding: 10px
cursor: pointer;
}

.button-submit {
@extend %button;
background-color: green;
}

CSS Output:

.button-submit {
border: none;
padding: 10px
cursor: pointer;
}

.button-submit {
background-color: green;
}

I usually prefer to extend a placeholder selector instead of a class selector. In this way, your final version of CSS won't look as messy. Again, it's your personal preference.

I will share some resources that might be helpful:

1. https://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/
2. https://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass

Hope this helps!

Happy Coding!