如何在@each循环SCSS中使用@include名称的变量 [英] how to use variable for @include name inide @each loop SCSS

问题描述

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

I want to replace this SCSS code with @each usage.

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} （）{...}

When I use @each function compiler throws out an error - invalid css with @include #{$bp}(){...}

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

每个人都知道如何处理这个错误？
感谢任何帮助

Does everybody know how to handle this error? Appreciate any help

推荐答案

此代码的问题在于插值不能用于转换 变量到标识符。 Sass编译器不允许它。在插入 $ bp 的位置，编译器需要一个标识符。它会将此时的任何内容视为标识符，而不是应该插入的内容。

The problem with this code is that interpolation can't be used to convert a variable to an identifier. The Sass compiler won't allow it. At the point where you interpolate $bp, the compiler expects an identifier. It will treat anything at that point as an identifier and not something that should be interpolated.

从您的代码中看来，您已经定义了几个 mixins 与 @content 在块内传递，如此

From your code it appears you've defined several mixins with @content passed within the block like so

@mixin us() { @content; }
@mixin sm() ( @contnet; }

这就是他们被调用的原因喜欢这样

which is why they are called like so

@include us(){
  @include define-breakpoint("us");
}

您可以重构代码以仅使用一个 mixin 因为实际上唯一改变的是块中的代码。

You could refactor your code to make use of only one mixin since the only thing that's actually changing is the code in the block.

$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将参数作为参数传递。

Another option would be to define the mixin to take a parameter instead and have the code within that block include the define-breakpoint mixin passing the parameter as an argument.

$list: us xs sm md lg xl;

@mixin screen-size($size) { 
  @include define-breakpoint($size); 
}

body {
  @each $size in $list {
    @include screen-size($size);
  }
}

更新的答案

要实现代码中指定的附加功能，您可以对上一个答案进行以下调整

To achieve the added functionality specified in your code you can make the following adjustments to the previous answer

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

希望这可以解决您的问题

Hope this solves your problem

这篇关于如何在@each循环SCSS中使用@include名称的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！