SASS add custom parameter to media query inside @mixin

Question

I've created @mixin in SASS to do media queries for me;

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

Works perfect, but I want to add another part (aspect-ratio, orientation etc.) to the @media query - string, just after the whole created Query. Ive tried hard, but it keeps telling: Unexpected token SASS_VAR found or something similar.

Code looks like:

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

It's my first time with SASS. I've read about built-in CSS3 @mixins I'm used to PHP, where it's like

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

What should I do? Thanks :)

the new mixin looks good, but I want to have the last parameter optional, so I don't want hard-coded "and"

score 0 · Answer 1 · answered Oct 02 '16 at 18:44

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

produces:

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

I need the last one to be optional – sjiamnocna Oct 04 '16 at 17:00 — sjiamnocna, Oct 04 '16 at 17:00

SASS add custom parameter to media query inside @mixin

1 Answers1