SASS placeholder Tutorials with Examples

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;
      }
    }