Solution 1 :

I did some minor improvements to your code like the ; that was missing after @content in _mixins.scss. However the main issue was, that you were using media-sm in _kalendarz.scss while it was only imported to main.scss. You can only @include a mixin in the same file you @import it.

// _mixins.scss

@mixin media-sm {
  @media screen and (max-width: 500px) {
    @content;
  }
}
// _kalendarz.scss

@import "mixins"; // or preferably `@use "mixins";`, if Version: Dart Sass > 1.23.0

@include media-sm {
  .name {
    font-size: 20px;
    font-weight: 400;
    margin: 20px;
  }
}
// main.scss

@import "kalendarz";

Problem :

can somebody tell me what am I doing wrong. I want to have my media queries in @mixins but compiler throws an error.
_mixin.scss

@mixin media-sm {
@media screen and (max-width:500px) {
    @content
}

}

main.scss

@import 'kalendarz';
@import 'mixins';

_kalendarz.scss

@include media-sm{
 .name {
        font-size: 20px;
        font-weight: 400;
        margin: 20px;
    }
}

error

Error: no mixin named media-sm
        on line 102 of sass/c:UsersBartekDocumentsprogramowanieWebsite-managing-driving-lessons_kalendarz.scss
        from line 3 of sass/c:UsersBartekDocumentsprogramowanieWebsite-managing-driving-lessonsmain.scss
>> @include media-sm {

Comments

Comment posted by lharby

Is your file called _mixin.scss or _mixins.scss you refer to both names in your question. If the import works for another sass file then put the mixin in there to test.

By