Блог

Я создал @mixin в SASS для выполнения медиа-запросов для меня;

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