Ternary condition on class in Sass

user_4615178 0
Viewed 12589

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';
}
sass css
5 Answers

Yes there is, I just found out myself just now.

$caretTop: 'top: -45';
$caretTop: 'top: 45' !default;

Basically, if you don't set the variable before it will default to the first value 'top: 45' if you set it then it will leave it alone.

user_26309360

I would update it with my version for SASS syntax. The quotes have to be skipped there, and the empty value is not allowed either. If you need an empty string, you have to use () syntax:

$fontSizes: ("xx": 28, "xl": 20, "lg": 15)
$lineSizes: ("xx": 38, "xl": 25, "lg": 20)
$fontWeights: ("normal": 400, "regular": 400, "semibold": 600, "bold": 700)

=custom-font($fontSizeName, $fontWeightName, $important: false)
  font-size: map-get($fontSizes, $fontSizeName) / 16 + rem if($important==true,!important,())

.title
  +custom-font("xx", "semibold", true)
user_7933200
Related