SASS在@mixin里为媒体查询添加自定义参数

Question

我在SASS中创建了@mixin来为我做媒体查询;

@mixin break($bp1, $minmax:minmax, $media:screen, $bp2:null){ 
    @if $minmax == "minmax" and variable-exists(bp1) and $bp2{ 
     @media #{$media} and (min-width: $bp1) and (max-width: #{$bp2 - 1px}){ 
      @content; 
     } 
    } @else if $minmax == "min" and variable-exists(bp1){ 
     @media #{$media} and (min-width: $bp1){ 
      @content; 
     } 
    } @else if $minmax == "max" and variable-exists(bp1){ 
     @media #{$media} and (max-width: #{$bp1 - 1}){ 
      @content; 
     } 
    } 
} 

运行完美，但我想另一部分（宽高比，方向等）添加到@media查询 - 字符串，刚刚创建查询后整。我努力了，但它一直在告诉：意外的令牌SASS_VAR发现或类似的东西。

代码如下所示：

@mixin break($bp1, $minmax:minmax, $media:screen, $after:null, $bp2:null){ 
    @if $minmax == "minmax" and variable-exists(bp1) and $bp2{ 
     @media #{$media} and (min-width: $bp1) and (max-width: #{$bp2 - 1px}) #{$after}{ 
      @content; 
     } 
    } @else if $minmax == "min" and variable-exists(bp1){ 
     @media #{$media} and (min-width: $bp1){ 
      @content; 
     } 
    } @else if $minmax == "max" and variable-exists(bp1){ 
     @media #{$media} and (max-width: #{$bp1 - 1}){ 
      @content; 
     } 
    } 
} 

这是我第一次与上海社会科学院。我读过有关内置CSS3 @mixins 我已经习惯了PHP，它就像

echo "@media ... and() .." . $after; 

我应该怎么办？谢谢:)

---

新的mixin看起来不错，但我想有最后一个参数可选的，所以我不想硬编码“和”

Answer 1

@mixin break($bp1, $minmax: minmax, $media: screen, $bp2: null, $after: null) { 
    @if $minmax == "minmax" and variable-exists(bp1) and $bp2 { 
    @media #{$media} and (min-width: $bp1) and (max-width: calc(#{$bp2} - 1)) and (#{$after}){ 
     @content; 
    } 
    } 
} 

@include break(100, 'minmax', 'all', 200, 'aspect-ratio: 1') { 
    display: none; 
} 

生产：

@media all and (min-width: 100) and (min-width: calc(200 - 1)) and (aspect-ratio: 1) { 
    display: none; 
}