如何将多个 Mixin 应用于特定的类？答案

【问题标题】：How to apply multiple Mixins to a particular class?如何将多个 Mixin 应用于特定的类？
【发布时间】：2018-03-08 11:23:10
【问题描述】：

您好，我试图根据 width 将多个 mixin 应用于特定类，但这不起作用。当我们单独应用 mixins 时，它工作正常，有什么方法可以应用多个 mixins。

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

上面的css是对一个类应用多个mixins，这个是不是正确的方式。

应用多个 Mixin（不工作）

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

单独应用 mixins，但这是（工作正常）

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

有没有办法应用多个mixin

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

【问题讨论】：

你能展示一下mixin吗？
你可以使用类似this
你可以使用类似this

标签： css mixins

【解决方案1】：

Sass 不允许插入 mixin 名称，所以你可以做一些接近它的唯一方法是创建其他 mixin 分组另一个 mixin

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

【讨论】：