Sass 如何为@include name inide@每个循环SCS使用变量

我想用@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函数时，编译器抛出一个错误，即带有@include{$bp}（）{…}的无效css

每个人都知道如何处理这个错误吗？

---

感谢您的帮助

这段代码的问题是插值不能用于将变量转换为标识符。Sass编译器不允许这样做。在插入

$bp

时，编译器需要一个标识符。它会将该点上的任何内容视为标识符，而不是应该插入的内容

从您的代码中可以看出，您已经定义了几个

混合，其中
@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) );
    }
  }
}

希望这能解决您的问题
非常感谢您的回答。我的屏幕混音包含媒体查询：'@mixin us（）{'@media（最大宽度：519px）{'@content；}}'@mixin xs（）{'@media（最小宽度：520px）和（最大宽度：767px）{@content；}}，所以如果我用'@mixin screen-size（）{'@content}替换这些混音，我怎样才能考虑媒体的提问？我已经考虑到了这一点，并更新了我以前的回答。在第二个mixin中，我们不需要使用$n（$map，1），只需要使用$n（$map，1），我需要在我的mixin define breakpoint@mixin define breakpoint（$name）{&:after{content:“{35;{$name}”display:none；}嘿，谢谢你指出这一点，它应该是
nth
，而不是
$nth
。如果希望值是字符串，只需在
$list
变量中对其进行更改即可。用引号括起来，例如
'us'
，
'xs'
。。。等等我编辑了代码以显示
$list
变量的外观。我希望这些改变应该足够了
//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) );
    }
  }
}