CSS Sass Basics Add Reusable Logic to Your Sass Add Conditional Logic to Your Stylesheets

Tarek Salha
seal-mask
.a{fill-rule:evenodd;}techdegree
Tarek Salha
Front End Web Development Techdegree Student 9,116 Points

I keep getting an error @else must come after @if, and I followed the video step by step.

// Media queries @mixin mq($break) {

 @if $break == 'xs' {
    @media (max-width: $break-xs) {
    @content; 
  }
 }  
 @else if $break == 'sm' {
    @media (min-width: $break-s) {
    @content;   
 }

@else if $break == 'med' {
 @media (min-width: $break-m) {
 @content;
   }
 } 
 @else if $break == 'lg' {
  @media (min-width: $break-l) {
  @content;   
 } 

}

1 Answer

Hi Tarek,

I hope you've already gotten an answer to your question, but in case you haven't...I noticed that your curly braces may be a little off. It looks like you closed your first @if correctly, but then you missed a few closing curly braces. Your code should look something like this:

@mixin mq($break) {
  @if $break == 'xs' {
    @media (max-width: $break-xs) {
        @content;
    }
  } 
  @else if $break == 's' {
    @media (min-width: $break-s) {
        @content;
    }
  } 
  @else if $break == 'med' {
    @media (min-width: $break-m) {
        @content;
    }
  } 
  @else if $break == 'l' {
    @media (min-width: $break-l) {
        @content;
    }
  }
}

Each conditional should be followed by two closing curly braces...except the last one, it should have three. It's pretty common error, I still make it a lot since my muscle memory isn't fully activated yet.

Hope this helps. Happy coding!