Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Tarek Salha
.a{fill-rule:evenodd;}techdegree
Tarek Salha
Front End Web Development Techdegree Student 9,441 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

Clinton Hays
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points

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!