How to apply multiple Mixins to a particular class?

Question

Hi i was trying to apply multiple mixins to a particular class based on width , but that does not working. When we apply mixins individually it works fine is there any way to apply multiple mixins.

@include largeDevice, mediumeDevice {
    width: 600px;
}

the above css is to apply multiple mixins to a class , Whether this is right way.

Applying multiple Mixins (Not Working)

.battery-component svg {
  width: 540px;
  @include largeDevice, mediumeDevice {
    width: 600px;
  }
 @include extraSmallDevice {
    width: 500px;
 } 
}

Applying mixins individually but this is (Working fine)

.battery-component svg {
  width: 540px;
  @include largeDevice {
    width: 600px;
  }
  @include mediumeDevice {
    width: 600px;
  }
 @include extraSmallDevice {
    width: 500px;
 }    
}

Is there any way to apply multiple mixins

custom_mixin.scss

@mixin bottom-panel($maxWidth) {
  width: $maxWidth;
}


$breakpoint-lr: 1200px;
$breakpoint-md: 992px;
$breakpoint-sm: 768px;
$breakpoint-xs: 600px;

@mixin largeDevice {
  @media (min-width: #{$breakpoint-lr}) {
    @content;
  }
}

@mixin mediumDevice {
  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lr - 1px}) {
    @content;
  }
}

@mixin smallDevice {
  @media (min-width: #{$breakpoint-sm}) and (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin extraSmallDevice {
  @media (min-width: #{$breakpoint-xs}) and (max-width: #{$breakpoint-sm - 1px}) {
    @content;
  }
}

You can use something like [this](https://stackoverflow.com/a/67297049/13349770) — EzioMercer, Apr 28 '21 at 09:24
You can use something like [this](https://stackoverflow.com/a/67297049/13349770) — EzioMercer, Apr 28 '21 at 09:29

score -1 · Answer 1 · answered Mar 08 '18 at 11:46

Sass does not allow interpolating mixin names, so the only way you can do something close to it is create others mixin grouping another mixins

@mixin largemediumDevice($mixin1-arg1, $mixin2-arg1){
  @include largeDevice($mixin1-arg1){@content}
  @include mediumDevice($mixin2-arg1){@content}
}

How to apply multiple Mixins to a particular class?

1 Answers1