SCSS

Placeholders

• Placeholder selectors are useful when writing a Sass library where each style rule may or may not be used
• Placeholders serve the same basic purpose as mixins, but without arguments and with different syntax.
• It is often better to just extend a class selector if one is available
• Stick to extending placeholders, not existing CSS selectors
• Extend a placeholder as few times as possible in order to avoid side effects
• Placeholders work the same as classes and ID’s but don’t create any CSS themselves
• Placeholders serve as markers or reference points in CSS
• They are represented by a percentage symbol

                                                        
                                                        
                                                            // Placeholder Syntax
                                                        %placeholder-name {
  // your code here 
}
                                                        
                                                        // To call your placeholder
selector {
  @extend %placeholder-name;
}
                                                        
                                                            

Extends

There are times when several classes share the same CSS properties but also require their own unique styles. One SCSS approach to declutter the code is to use extends.

This is useful when writing BEM which encourages modifier classes that go on the same elements as block or element classes.

                                                        
                                                        
                                                            // SCSS input
                                                        %bg-image {
  width: 100%;
                                                          background-repeat: no-repeat;
}
.image-one {
  @extend %bg-image;
  background-image:url(/img/image-one.jpg");
}
.image-two {
  @extend %bg-image;
  background-image:url(/img/image-two.jpg");
}
                                                        
                                                        // Output 
                                                        .image-one, .image-two {
  width: 100%;
  background-repeat: no-repeat;
}
.image-one {
  background-image:url(/img/image-one.jpg") ;
}
.image-two {
  background-image:url(/img/image-two.jpg") ;
}