css - 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');
  }
}