@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クエリに別の部分（縦横比、向きなど）を追加したい - 全体のクエリを作成した直後に、文字列。 Iveは一生懸命やってみたが、それは伝え続ける：予期しないトークンSASS_VARはまたは類似のものを見つけた。それはSASSで初めてです

@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 について読んだ私は、それは私が何をすべき

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

ようなものだPHPに慣れていますか？感謝:)

---

新しいミックスインがよさそうだが、私は、オプションの最後のパラメータを持つようにしたいので、私はハードコーディングされたくない「と」

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