How Can I Use Multiple @include in SCSS?

Question

I want to use multiple include in the same SCSS. For example:

.section-ptb {
    padding-top: 130px;
    padding-bottom: 130px;
    @include desktop {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    @include tablet {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    @include mobole {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

it's very Boring to Multiple @include frequently. Have Any Way to Reduce The Code, I want to use:

.section-ptb {
    padding-top: 130px;
    padding-bottom: 130px;
    @include desktop , @include tablet, @include mobole {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

But It's Not Valid SCSS. Please Tell Me Another Way To Reduce The Code.

Hierolatry

It's not supported in scss, you can only group them by creating another mixin – Midden

Answer 1

As mentioned by @karthick dynamic includes are not supported (yet). In your case I think it would make sense to have a single mixin to handle all media queries – like:

SCSS

//  map holding breakpoint values
$breakpoints: (
  mobile : 0px, 
  tablet : 680px, 
  desktop: 960px
);

//  mixin to print out media queries (based on map keys passed) 
@mixin media($keys...){
  @each $key in $keys { 
    @media (min-width: map-get($breakpoints, $key)){
      @content
    } 
  }
}



.section-ptb {
  padding-top: 130px;
  padding-bottom: 130px;

  //  pass the key(s) of the media queries you want to print  
  @include media(mobile, tablet, desktop){
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

CSS Output

.section-ptb {
  padding-top: 130px;
  padding-bottom: 130px; 
}
@media (min-width: 0px) {
  .section-ptb {
    padding-top: 80px;
    padding-bottom: 80px; 
  } 
}
@media (min-width: 680px) {
  .section-ptb {
    padding-top: 80px;
    padding-bottom: 80px; 
  } 
}
@media (min-width: 960px) {
  .section-ptb {
    padding-top: 80px;
    padding-bottom: 80px; 
  } 
}

Clercq

Works wonderful! Thank you. One thing, I had to add the "desktop" media at the end of the others (maybe because tablet's min-width seems to override desktop's min-width, because desktop was before tablet). – Helicopter

Answer 2

You can use something like this:

SCSS

@mixin phone {
  @media /*conditions*/ {
    @content
  }
}

@mixin tablet {
  @media /*conditions*/ {
    @content
  }
}

@mixin desktop {
  @media /*conditions*/ {
    @content
  }
}

@mixin media($keys...) {
  @each $key in $keys {
    @if ($key == phone) {
      @include phone {
        @content
      }
    } @else if ($key == tablet) {
      @include tablet {
        @content
      }
    } @else if ($key == desktop) {
      @include desktop {
        @content
      }
    }
  }
}

USAGE

@include media(phone, tablet, desktop) {
  // your scss code
}

@include media(tablet, desktop) {
  // your scss code
}

@include media(phone) {
  // your scss code
}

// and so on...

Verdin

this is what i exactly want to find. thanks! only one small additional tipp: you can use 2 or more \@include in one \@if clause, which makes the \@mixin more flexible. – Poet

@Poet Thank you for your tip! But at the moment when I came up with a solution I didn't need it :) – Verdin