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函数编译器时抛出错误 - 使用@include ＃{$ bp} （）{...}

无效的css

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

希望这能解决您的问题

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

1 个答案: