Sass中类的三元条件

Question

是否有可能在 Sass 中使用三元条件，尤其是在类对象上？看起来像的东西：

[class*="fa-caret-"]{
   &:left ? 'top: -45' : 'top: 45';
}

Answer 1

这取决于您想要实现的目标，但这里有一个混合元素的示例，该示例迭代元素列表和用于更改值的三元运算符。

$carets: left right;

@each $caret in $carets{
  $symbol: if($caret==left,'-','');
  .fa-caret-#{$caret}{
    top: #{$symbol}45px;
  }
}

如果您想要更多元素或设置属性，请使用映射而不是列表（那么，您可能不需要任何三元运算符）：

$carets: (
  (
    'name': left,
    'value': -45px
  ),
  (
    'name': right,
    'value': 45px
  )
);


@each $caret in $carets{
  .fa-caret-#{map-get($caret, 'name')}{
    top: map-get($caret, 'value');
  }
}