Question

我正试图找到一种比较变量名称的方法，例如@each循环中的$ topLeft带有一个字符串，例如'topLeft' - 一个例子是：

@mixin getCorner($topLeft:false, $topRight:false, $bottomRight:false, $bottomLeft:false) {

  @each $corner in $topLeft, $topRight, $bottomRight, $bottomLeft {

    @if #{$corner} == topLeft {

      border-top-left-radius: $corner;

    }

  }

}

上面显然不起作用，但有没有办法在Sass中做到这一点？

Answer 1

如果您使用名称top-left而不是topLeft，则可以减少必须编写的代码量。在这里，我有一个列表，它没有完全符合您的要求，但您可以轻松地使用它来继续进行您想要进行的比较。

$corners: (top-left, top-right, bottom-left, bottom-right);
@mixin getCorner($cornerName, $cornerVal) {
$max: length($corners);
  @for $i from 1 through $max {
    $temp: nth($corners, $i);
    @if ($temp == $cornerName) {
      border-#{$temp}-radius: $cornerVal;
    }
  }
}

body {
@include getCorner(top-left, 2px);
}

Answer 2

分配变量时，所有解释器都知道它包含的值，而不是它的名称。因此，当您循环使用值时，$corner将被设置为列表中的一个值。它永远不会是topLeft，除非您将其作为$topLeft参数的值传递，这就是您的@if语句永远不会评估为真的原因。

如果使用默认值null而不是false，则可以简化很多：

@mixin getCorner($topLeft: null, $topRight: null, $bottomRight: null, $bottomLeft: null) {
    border-top-left-radius: $topLeft;
    border-top-right-radius: $topRight;
    border-bottom-right-radius: $bottomRight;
    border-bottom-left-radius: $bottomLeft;
}

.foo {
    @include getCorner($topLeft: 50%, $bottomRight: 50%);
}

输出：

.foo {
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

SASS：将@each循环中的变量名称与字符串进行比较

2 个答案: