SAAS placeholder using extend

We want to apply the same styles and some sets of styles to different selectors, copying common styles to selectors violates the DRY principle. for example, if you apply typography to all anchor links, SASS provides features like Mixins and placeholders to solve this.

Placeholders are one of the important features of SASS. It can be declared using a percentage symbol or class selector followed by name of the placeholder.

Syntax:

%placeholder-name{
  //styles
}
.placeholder-name{
  //styles
}

Once the place holder is declared, extend directive is used to extend or inherit the properties from other CSS style selectors.

body{
  @extend %center
}

Placeholder selector example using extend directive

The following example was created and extended with placeholder syntax.

  • Created a placeholder myheading as a base style for all extended selectors
  • extend placeholder in every heading tag-H1,H2,H3,H4,H5,H6
  • All the heading tags have the same base styles properties inherited
  • Added extra properties in a separate selector for each header tag
%myheading{
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}
h1 {
  @extend %myheading;
  font-size: 20px;
}
h2 {
  @extend %myheading;
  font-size: 18px;
}
h3 {
  @extend %myheading;
  font-size: 16px;
}
h4 {
  @extend %myheading;
  font-size: 14px;
}
h5 {
  @extend %myheading;
  font-size: 12px;
}
h6 {
  @extend %myheading;
  font-size: 10px;
}

CSS is

h6, h5, h4, h3, h2, h1 {
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

h4 {
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 10px;
}

class selector example using extend directive


.myheading{
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}
h1 {
  @extend .myheading;
  font-size: 20px;
}
h2 {
  @extend .myheading;
  font-size: 18px;
}
h3 {
  @extend .myheading;
  font-size: 16px;
}

generated css is


.myheading, h3, h2, h1 {
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}
h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

Both are generated with the same properties and styles expect one difference. The difference between placeholder selector and class selector is, that the class selector is also added as a base class, and placeholder generated are not added to it. This makes placeholder selectors generate less CSS code.

Difference between Mixin vs Place holder

As you see mixins can be declared @mixin keyword and @include is used to include the styles, Do you think both are the same, both are different from a functional perspective

  • both generate the same CSS styles, but placeholders don’t have arguments
  • Mixins have full control as it allows arguments
  • Placeholders are not suitable for all use cases as arguments are not passed
  • placeholders organize separately shared styles
  • Mixins assigns the properties to CSS styles
@mixin mymixin {
    margin: 10;
    padding: 4px;
}

.leftcolumn {
  @include mymixin;
  background-color: blue;
}
.rightcolumn {
  @include mymixin;
  background-color: blue;
}

Once the above code is compiled, Generated CSS as follows

.leftcolumn {
  margin: 10;
  padding: 4px;
  background-color: blue;
}

.rightcolumn {
  margin: 10;
  padding: 4px;
  background-color: blue;
}

place holder example

%contentplaceholder {
    margin: 10;
    padding: 4px;
}
.leftcolumn1 {
  @extend %contentplaceholder;
  background-color: blue;
}
.rightcolumn1 {
  @extend %contentplaceholder;
  background-color: blue;
}

generated css is

.leftcolumn1, .rightcolumn1 {
  margin: 10;
  padding: 4px;
}

.leftcolumn1 {
  background-color: blue;
}

.rightcolumn1 {
  background-color: blue;
}

which symbol is used to represent a placeholder in sass?

placeholder selectors in sass are represented using the % symbol.

These will not be output in CSS files during the compilation process.

It only outputs When you extend the selectors.