如何在@each循环SCSS中为@include名称使用变量

Question

我想用 @each 用法替换这个 SCSS 代码。

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 with @include #{$bp}(){...}

$list: us xs sm md lg xl;
  @each $bp in $list{
    body{
    @include #{$bp}(){
      @include define-breakpoint("#{$bp}")
    }
    }
  }

大家都知道如何处理这个错误吗？ 感谢任何帮助

Answer 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);
    }
  }
}

另一种选择是定义 mixin 来代替参数，并让该块中的代码包含 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) );
    }
  }
}

希望这能解决你的问题