如何在 @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 与 @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) );
    }
  }
}

希望这能解决您的问题

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

how to use variable for @include name inide @each loop SCSS

each

sass

include