Question

您好我正在尝试根据宽度将多个mixins应用于特定类，但这不起作用。当我们单独应用mixins时，它可以正常工作以应用多个mixins。

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

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

应用多个Mixins（不工作）

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

Answer 1

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

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

如何将多个Mixins应用于特定类？

1 个答案: