How to Use Multiple @Include in SCSS

Sass/scss multiple mixins combining styles

It is not possible in the way you described, but it is possible with something like this.

div.needs-two-backgrounds {
    @include background-image(
        gradient(90deg, $color-one 0, $color-two 100%),
        gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%)
    );
}

You would then have to create a mixin background-image that supports variable arguments – pay attention to the three dots:

@mixin background-image($images...) {
    // do stuff here
}

The gradient-mixin should then be replaced by/extended with a gradient function. A good starting point on how this all can be done is the background-image mixin of the Compass project:

https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_images.scss#L97

How to use @each in mix includes in Sass?

The problem is here: @include media-#{$media-key} {...} 'cause you can't use interpolation in @mixin. See this post, it is very clear about this issue: How to define a dynamic mixin or function name in SASS?

So, we have to use another way. A solution could be create a general mixin and work with its arguments. Something like this:

@mixin general-media($width){
  @media only screen and (min-width: $width) {
    @content;
  }
}

After that, I choose to add your width values in $media-map map and use them with that mixin (I tried to use your code):

$media-map: (
  smartphone-xs: ( type: 'xs', width: $xs-width ), 
  smartphone-sm: ( type: 'sm', width: $sm-width ), 
  tablet-md:     ( type: 'md', width: $md-width ), 
  tablet-lg:     ( type: 'lg', width: $lg-width ), 
  desktop:       ( type: 'xl', width: $xl-width )
);

And this is your loop with some changes:

@each $media-key, $media-type in $media-map {
  @include general-media(map-get($media-type, 'width')) {
   @each $display-key, $display-type in $container-map {
       .container-#{map-get($media-type, 'type' )}-#{$display-key} { 
         display: map-get($map: $display-type, $key: display ); 
      }
    }
  }
}

This is all code in action:

/* MEDIA_QUERIES.SCSS */

$xs-width: 320px;
$sm-width: 576px;
$md-width: 768px;
$lg-width: 992px;
$xl-width: 1200px;

@mixin general-media($width){
  @media only screen and (min-width: $width) {
    @content;
  }
}

/* SIXBASE-GRID.SCSS */

$container-map: (
  flex:   ( display: flex ), 
  inline: ( display: inline )
);

$flex-direction-map: (
  row:            ( flex-direction: row ),
  row-reverse:    ( flex-direction: row-reverse ),
  column:         ( flex-direction: column ),
  column-reverse: ( flex-direction: column-reverse )
);

$media-map: (
  smartphone-xs: ( type: 'xs', width: $xs-width ), 
  smartphone-sm: ( type: 'sm', width: $sm-width ), 
  tablet-md:     ( type: 'md', width: $md-width ), 
  tablet-lg:     ( type: 'lg', width: $lg-width ), 
  desktop:       ( type: 'xl', width: $xl-width )
);

* {
  &::before,
  &::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@each $media-key, $media-type in $media-map {
  @include general-media(map-get($media-type, 'width')) {
   @each $display-key, $display-type in $container-map {
       .container-#{map-get($media-type, 'type' )}-#{$display-key} { 
         display: map-get($map: $display-type, $key: display ); 
      }
    }
  }
}

The output:

*::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media only screen and (min-width: 320px) {
  .container-xs-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-xs-inline {
    display: inline;
  }
}

@media only screen and (min-width: 576px) {
  .container-sm-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-sm-inline {
    display: inline;
  }
}

@media only screen and (min-width: 768px) {
  .container-md-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-md-inline {
    display: inline;
  }
}

@media only screen and (min-width: 992px) {
  .container-lg-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-lg-inline {
    display: inline;
  }
}

@media only screen and (min-width: 1200px) {
  .container-xl-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .container-xl-inline {
    display: inline;
  }
}

How to use scss @include

 @mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

then to use it

@include reset-list

https://sass-lang.com/documentation/at-rules/mixin

But I see that you are trying to use parameters in your mixin

https://www.tutorialspoint.com/sass/arguments.htm#:~:text=Explicit%20keyword%20argument%20can%20be,of%20argument%20can%20be%20omitted.

@mixin bordered($color, $width: 2px) {
   color: #77C1EF;
   border: $width solid black;
   width: 450px;
}

.style  {
   @include bordered($color:#77C1EF, $width: 2px);
}

So in short:
Declare your mixin before including it. Your error says that the mixin does not exist

@mixin transition($includes, $length) {
   transition: $includes $length;
}

.style  {
   @include transition($includes: all, $length: .2s);
}

Can I use multiple values for one property in Sass?

Why not just @include('grid-template-rows', '2fr 1fr 1fr'); ?

Or

Include a mixin and pass parameters as an arglist. It can be done different ways depending on what you want.

  @mixin grid($template-rows:null,$template-cols:null,$template-areas:null){
    @supports (display:grid) {
      display:grid;
      $grid-rows:();
      $grid-cols:();
      $grid-areas:();

      @each $rows in $template-rows{
        $grid-rows: append($grid-rows, #{$rows}fr);
      }
      @each $cols in $template-cols{
        $grid-cols: append($grid-cols, #{$cols}fr);
      }
      @each $areas in $template-areas{
        $grid-areas: append($grid-areas, #{$areas}fr);
      }
      grid-template-rows:#{$grid-rows};
      grid-template-columns:#{$grid-cols};
      grid-template-areas:#{$grid-areas};
    }
  }

 

  html{
    @include grid(1 2 3, 4 5 6, 7 8 9 );
  }

 

        /*
          // Outputs:
          @supports (display: grid) {
            html {
              display:grid;
              grid-template-rows: 1fr 2fr 3fr;
              grid-template-columns: 4fr 5fr 6fr;
              grid-template-areas: 7fr 8fr 9fr;
            }
          }
        */

---

Related Topics