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

这是我第一次与SASS合作。我读过有关内置CSS3 @mixins的内容我已经习惯了PHP，就像

一样

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

我该怎么办？谢谢:)）

新的mixin看起来不错，但我希望最后一个参数是可选的，所以我不想要硬编码＆＃34;和＃34;

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

SASS将自定义参数添加到@mixin

1 个答案: