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

Posted by Gemz Nunn
Gemz Nunn
16,296 Points

SASS is throwing up 'undefined mixin' error, but I HAVE defined the mixin?

I'm working my way through 'Add Conditional Logic to Your Stylesheets' and I'm working in Dreamweaver and compiling through the CMD line. Everything has been hunky dory until I encountered a very bamboozling problem.

I've set up the media queries mixin (mq) and have nested it in .img-container. I'm using it to set the image display to hidden on xs screen sizes. However, it refuses to compile as it does not recognise the mixin. I've had a play around and found that the mq mixin is recognised on the other scss files where I've used it, but not on this one (_images.scss).

Am I missing something? Is this something that I will kick myself for when it's pointed out? Only YOU have the answer! ;)

Here's the code I'm using btw. Pretty much the same as Guil's in the exercise. 

.img-featured {
  @include roundy(165px, 4px solid $white);
  margin-top: 75px;
  position: relative;
  z-index: 100;
    @include mq('xs') {
        display: none;
    }
}

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

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Is there a chance you haven't imported theimages.scss file, which is why it's not recognising the mixin?

Also it's a little hard for me to guess with just the code above but I also noticed when I put the code into sassMeister it was pulling up line 5 in the Media Query code

        @media (max-width:$break-xs) {

Undefined variable.

Which is probably because it exists elsewhere in your project but I found that by changing all the variables in the media queries to $break it compiled.

But I'm afraid these are only guesses as far as my eyes can see :)

Gemz Nunn
Gemz Nunn
16,296 Points

Thanks for looking at this, Jonathan. I opened the file this morning to try out a couple of the things you suggested. The mixins are imported in the _style.scss file, the variables are in the right place, and I even checked to see if it was an elusive curly bracket or semi-colon playing games with me (little sods!)

I decided to compare my code with the final code and I discover that Guil used keywords when calling arguments in the roundy function. I hadn't done that.

So, as predicted, I am kicking myself. Here's the code I ended up using: 

.img-featured {
  @include roundy($brdr: 4px solid $white, $dim: 165px);
  margin-top: 75px;
  position: relative;
  z-index: 100;
  @include mq('xs') {
    display: none;
  }
}
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

That's interesting, Gemz! I'm glad you got it sorted. I can't say I'm familiar with that method for calling your arguments in mixins. Which implementation of Sass are you using?

I'm aware that Dart Sass is where Sass is at these days but I haven't been minded to look into it properly yet. :)

Gemz Nunn
Gemz Nunn
16,296 Points
Gemz Nunn
Gemz Nunn
16,296 Points

I'm using Dart Sass, installed via Chocolatey (which is awesome!)