1

我试图找到一种方法来比较变量名，例如@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中有没有办法做到这一点？

4

2 回答 2

5

如果使用名称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);
}
于 2013-09-15T19:29:58.373 回答
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%;
}
于 2013-09-16T14:02:41.870 回答