Как использовать переменную для @include name inide @each loop SCSS
Я хочу заменить этот код SCSS на @each.
body{
@include us(){
@include define-breakpoint("us")
}
@include xs(){
@include define-breakpoint("xs")
}
@include sm(){
@include define-breakpoint("xs")
}
@include md(){
@include define-breakpoint("md")
}
@include lg(){
@include define-breakpoint("lg")
}
@include xl(){
@include define-breakpoint("xl")
}
}
Когда я использую функцию @each, компилятор выдает ошибку - недопустимый css с @include # {$ bp}() {...}
$list: us xs sm md lg xl;
@each $bp in $list{
body{
@include #{$bp}(){
@include define-breakpoint("#{$bp}")
}
}
}
Все ли знают, как справиться с этой ошибкой? Цени любую помощь
1 ответ
Проблема с этим кодом заключается в том, что интерполяция не может использоваться для преобразования переменной в идентификатор. Компилятор Sass не допустит этого. В точке, где вы интерполируете $bp
Компилятор ожидает идентификатор. В этот момент он будет обрабатывать все как идентификатор, а не как нечто, что следует интерполировать.
Из вашего кода, кажется, вы определили несколько mixins
с @content
прошло в блоке так
@mixin us() { @content; }
@mixin sm() ( @contnet; }
вот почему они называются так
@include us(){
@include define-breakpoint("us");
}
Вы можете реорганизовать свой код, чтобы использовать только один mixin
поскольку единственное, что на самом деле меняется, это код в блоке.
$list: us xs sm md lg xl;
@mixin screen-size() { @content; }
body {
@each $size in $list {
@include screen-size() {
@include define-breakpoint($size);
}
}
}
Другой вариант - определить миксин, который будет принимать параметр, а код в этом блоке будет включать define-breakpoint
mixin передает параметр в качестве аргумента.
$list: us xs sm md lg xl;
@mixin screen-size($size) {
@include define-breakpoint($size);
}
body {
@each $size in $list {
@include screen-size($size);
}
}
ОБНОВЛЕННЫЙ ОТВЕТ
Для достижения дополнительной функциональности, указанной в вашем коде, вы можете внести следующие корректировки в предыдущий ответ
//list now takes media query also
$list: 'us' '(max-width: 519px)',
'xs' '(min-width: 520px) and (max-width: 767px)',
'sm' '(max-width: 768px)',
'md' '(min-width: 769px)',
'lg' '(min-width: 519px) and (max-width: 960px)',
'xl' '(min-width: 961px)';
//mixin takes media query as argument
@mixin screen-size($query) {
@media #{$query} {
@content;
}
}
body {
@each $map in $list {
@include screen-size( nth($map, 2) ) {
@include define-breakpoint( nth($map,1) );
}
}
}
Надеюсь, что это решит вашу проблему