Ternary condition on class in Sass

sass if class exists
sass mixin ternary operator
sass functions
sass conditional import
scss variables
scss not condition
sass if variable-exists
scss parameters

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

   &:left ? 'top: -45' : 'top: 45';

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,'-','');
    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');

Is there a sort of ternary operator in #Sass ? · GitHub, you could mimic the behaviour with your own functions like, @function if($​condition, $if-value, $else-value) { @if ($condition == true) { @return  One of the drawbacks to the ternary, though, is that you cannot evaluate for only one condition. Working from the previous example, if you wanted to navigate to the profile page if the user was logged in, but take no action at all if they weren’t, this won’t work…

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.

Sass If() statement (ternary), An example of using a sass if () conditional statement. An if() statement is like a ternary operator in other languages like JavaScript for example. Sample Syntax to use Conditional / Ternary operator in Apex Class. X?Y:Z Integer Result = SomeCondition ? Value1 : Value2; Example for Ternary operator in Apex Class: Integer ListPrice = 50; Integer SalesPrice = 100; Integer TotalAmount = ListPrice > 50 ? ListPrice : SalesPrice; System.debug(‘::TotalAmount::’+ TotalAmount);

Matching by class attribute selector is not necessary. All you have to do is a simple loop and some interpolation

$caret-types: ((left -45px), (right 45px));
@each $caret in  $caret-types{
  $name: nth($caret, 1);
  $offset: nth($caret, 2);
    top: $offset;

which compiles to

.fa-caret-left {
  top: -45px;
.fa-caret-right {
  top: 45px;

Ternary condition on class in Sass - css - html, 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:  The ternary operator starts with a boolean condition. If this condition evaluates to true then it will execute the first statement after ?, otherwise the second statement after : will be executed. The following example demonstrates the ternary operator.

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,())

  +custom-font("xx", "semibold", true)

Sass Control Directives, Let's look at a couple of examples. This first example is roughly equivalent to a JavaScript switch statement. The statements inside the first condition that evaluates  Sass is quite popular and tends to be an essential tool for every front-end developer. Sitepoint has already published some introductory articles about this CSS preprocessor language. In this

@llobet's answer is great, but you could also use a variable.

$position: left;

   top: if($position == left, -45, 45);

$position: right;

Jump Start Sass: Get Up to Speed With Sass in a Weekend, Get Up to Speed With Sass in a Weekend Hugo Giraudel, Miriam Suzanne. We now come back to Sass, which is without a ternary operator; however, For instance, you could loop over a list of class names to apply a specific color to them. Preprocessing. CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Sass: @if and @else, SCSS; Sass; CSS Every other value is considered truthy, so Sass considers them to work like true and cause conditions to succeed. For example, if you want​  Object Syntax. We can pass an object to v-bind:class to dynamically toggle classes: < div v-bind:class = "{ active: isActive }" > </ div > The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

Add Conditional Logic To Sass With Control Directives, There are several Sass control directives, such as @if and @for, that let you One of the ways CSS can be limiting is the lack of conditional logic and loops. The code also uses interpolation to add the value of $i to the class  💡 Fun fact: Mixin names, like all Sass identifiers, treat hyphens and underscores as identical. This means that reset-list and reset_list both refer to the same mixin. This is a historical holdover from the very early days of Sass, when it only allowed underscores in identifier names.

Sass Basics: Operators, Arithmetic operators are used to perform the standard arithmetic operations. Here are the arithmetic operators that Sass supports: Operator  In older versions of LibSass and Ruby Sass, the call() function took a string representing a function’s name. This was changed to take a function value instead in preparation for a new module system where functions are no longer global and so a given name may not always refer to the same function.