CODEWITHSUNDEEP
csssass
riogrande
riogrande

Reputation: 349

scss error expected media query

Im doing a scss mixin for media query 

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type == true {
    @media $media-type and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

$media-type is false as default, if i dont want to specify it when calling mixin. If $media-type is passed in mixin then i want to that variable to be printed after @media. So if i include mixin @include breakpoints(400, 600, only screen), as result i want @media only screen and..

when i try to test my mixin on sassmeister, i get this error:

Invalid CSS after "    @media ": expected media query (e.g. print, screen, print and screen), was "$media-type and..."

what am i doing wrong?

Upvotes: 1

Views: 13687

Answers (2)

riogrande
riogrande

Reputation: 349

I found out a way to do it to work without having to specify if statement for each media type.

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type {
    @media #{$media-type} and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

the key was in #{$media-type}. now everything works, but i dont know how correct my solution is.

now i can call the mixin with 

@include breakpoints(400, 600, only screen)

and 

@include breakpoints(400, 600, 'only screen')

and 

@include breakpoints(400, 600)

which will bring back the all keyword

Upvotes: 2

JordanBarber
JordanBarber

Reputation: 2101

Sass does not understand what you are trying to do when you pass back in the $media-type variable. You will need to set an if statement for each 'media type' like: 

@mixin breakpoints($min-width, $max-width, $media-type: false) {
  @if $media-type == print {
    @media print and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  } @else {
    @media all and (min-width: $min-width) and (max-width: $max-width) {
      @content;
    }
  }
}

Upvotes: 0

Related Questions