Как использовать переменную для @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) );
    }
  }
}

Надеюсь, что это решит вашу проблему

Другие вопросы по тегам