0

Apologies if this question has been asked before, just cannot figure this out for the life of me. I am new to coding though, so that could be a major factor.

I am using the latest vs code and Ritwick Dey live sass compiler 3.0.

I started a new project recently and have been having issues with the sass compiler. I have tested my code with both ATOM and Brackets and they work perfectly, however vs code is throwing up the following compilation error:

Error: no mixin named breakpoint-down
        on line 61 of Users/simon/Documents/Training/Web Design/Frontend Mentor Challenges/easybank-landing-page-master/scss/_globals.scss
        from line 1 of sass/Users/simon/Documents/Training/Web Design/Frontend Mentor Challenges/easybank-landing-page-master/scss/main.scss
>>   @include breakpoint-down(medium) {

   -----------^

Screenshot 1

Screenshot 2

It is also happening with variables and not recognising them. When I make changes to all files, they compile ok and show in the main.css file.

I loaded a previous project and that does recognise the variables and the mixins, however I have copied everything the same way, the file structure is exactly the same, so I am now in need of help.

Thanks in advance.

AnsonH
  • 2,460
  • 2
  • 15
  • 29
Simon
  • 1
  • 2

2 Answers2

1

Seems that the file with the missing mixin has not been included to the stylesheet itself.

So you can check if @import 'mixins' has been added to the stylesheet before the file in which you call the mixin.

(Just a little remark because we had that this week: I do not believe that that's the reason. But the compiler you use is not longer supported although it is still very popular. Inbetween there is an faster alternative or the same compiler can be loaded from another respirotory in github. See: Live Sass Compiler - @use causes compilation error)

Brebber
  • 2,986
  • 2
  • 9
  • 19
  • Thanks Brebber. Your answer helped me to understand what was happening and was able to fix it. – Simon Feb 24 '21 at 11:19
0

I figured out the problem.

It seems that the compiler will compile files in the order that they are placed inside the main.scss file. As I had my mixins and variables files at the bottom, the error message appeared and stopped the import process and gave the compilation error.

Wrong way

@import "globals";
@import "header";
@import "mixins";
@import "variables";

Right way

@import "mixins";
@import "variables";
@import "globals";
@import "header";

I hope this helps someone else having the same issue.

Simon
  • 1
  • 2