SASS placeholder Tutorials with Examples

Placeholders in SASS enable the declaration of a group of rules as base styles and extend those styles into other classes. It enables the DRY (don’t repeat your code) principle for modular design.

Here is a syntax

  %placeholderName { 
    name: value
  }

We can use the above placeholder using the @extend directive.

@extend and placeholder selectors(%) are used to declare and extend in other styles.
SASS syntax supports sass and scss extension

Extended buttons with additional styles example

• Created button placeholder as a base class with default styles
• Created an extended style for error, info, success, and warn buttons with additional styles
• Extended styles using @extend directive with placeholder

%btn {  
  border: none;  
  background-color: white;  
  cursor: pointer;  
  color: white;  
}  
  
.btn-error{  
  @extend %btn;  
  color:red;  
}  
.btn-warn{  
  @extend %btn;  
  color:yello;  
}  
.btn-info{  
  @extend %btn;  
  color:blue;  
}  
  
.btn-success{  
  @extend %btn;  
  color:green;  
}  

When the above sass styles compile, the output of CSS is as follows.

  
.btn-error, .btn-warn, .btn-info, .btn-success {  
  border: none;  
  background-color: white;  
  cursor: pointer;  
  color: white;  
}  
  
.btn-error {  
  color: red;  
}  
  
.btn-warn {  
  color: yello;  
}  
  
.btn-info {  
  color: blue;  
}  
  
.btn-success {  
  color: green;  
}  

placeholder selectors with media queries using extend directive

Using the @extenddirective in media queries is tricky.

if you extend the selector outside of the media query, It always gives an error - You may not @extend an outer selector from within @media.You may only @extend selectors within the same directive. From “@extend %heading” online.
To understand better, First understand the declaration of the rule inside media queries.

  
%heading {  
  color: blue;  
  font-size:18px;  
  
  @media (min-width: 600px) {  
    h1{  
      @extend %heading;  
    font-size:10px;  
    }  
  }  
}  

output CSS does not generate, instead got the below error

You may not `@extend` an outer selector from within @media.  
You may only @extend selectors within the same directive.  
From "@extend %heading" on line 7.  

To avoid those errors, We have to use @mixin for each selector that you want to use in media queries and extend in Media queries to use mixins.

@mixin heading() {  
  color: blue;  
  font-size:18px;  
}  
  
  
@media (min-width: 600px) {  
  h1 {  
    @include heading();  
  }  
}  

generated CSS is

  
  
.h1 {  
  color: blue;  
  font-size: 18px;  
}  
  
@media (min-width: 600px) {  
  h1 {  
    color: blue;  
    font-size: 18px;  
  }  
}