Ternary condition on class in Sass

Question

Is there a possibility to use a ternary condition in Sass especially on class object ? Something which would look like :

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

Answer 1

It depends on what you want to achieve, but here you have an example of a mixin iterating over a list of elements and a ternary operator for changing a value.

$carets: left right;

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

If you want more elements, or setting properties use a map instead of a list (then, you maybe don't need any ternary operator):

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


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