SAAS - Placeholder

This tutorial covers basic of placeholder with examples in SassScript and also difference between Mixin and placeholder.

SAAS placeholder

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

Placeholder are one of the important features in SASS.It can be declared using percentage symbol or class selector followed by name of the place holder

Syntax

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

Once place holder is declared, extend directive is used to extend or inherit the properties from other css style selecetors

body{
  @extend %center 
}

Placeholder selector example using extend directive

The following example created and extended with placeholder syntax.

  • Created a placeholder myheading as a base styles for all extended selectors
  • extend placeholder in every heading tag-H1,H2,H3,H4,H5,H6
  • All the heading tags has same base styles properties inherited
  • Added extra properties in 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 same properties and styles expect one difference. The difference between placeholder selector and class selector is, class selector also added as a base class, placeholder generated are not added to it. Thus makes placeholder selectors generates 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 same, both are different in functional perspective

  • both are generates 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 case as arguments are not passed
  • placeholders organizes 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 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;
}
```CSS
generated css is

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

.leftcolumn1 {
  background-color: blue;
}

.rightcolumn1 {
  background-color: blue;
}
Prev Prev Next