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";
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 {
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.