@extend in sass is just like a inheritance in oops. The @extend directive allows one selector to inherit the styles of another selector. This is more powerfull feature of sass for styling. Here we create a selector and follows reusablity criteria using @extend directive. It prevents code bloat by grouping selectors that share the same styles into one rule. 

Here’s are a basic example:...

Here we can see that color selector is extended in box1 and box2...After compiling the output css file will be look like as...

Here we clearly see that how the code is re-used.This makes the sass more powerfull..

Sass 3.2 introduced a special feature called placeholder selectors. They are classes that aren’t output when your SCSS is compiled.

They’re also referred to as “silent classes” because they won’t appear in our CSS output unless we @extend them. Basically we write it exactly like a class except we prefix it with the % symbol instead of a dot. Also, it follows the same naming rules as classes.

Lets see the example...

After compiling that scss file the css file will be look like as...

As we have seen in upper example Where normal selector is used (.color) the color selector that is extended, also exits in the css file (output).But when we used placeholder selectors the color selector in upper example not exits in the css file unless it is extended in box1 and box2. As I’ve said: placeholders are not compiled to the source.