Skip to content

Instantly share code, notes, and snippets.

@MoOx
Created December 12, 2012 08:54
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MoOx/4266210 to your computer and use it in GitHub Desktop.
Save MoOx/4266210 to your computer and use it in GitHub Desktop.
Is there a sort of ternary operator in #Sass ?
//...
$background: null; // if you don't do this, background is undefined out of the @if/else scope
@if ($direction) {
$background: linear-gradient($direction, $color, $color2);
}
@else {
$background: linear-gradient($color, $color2);
}
//...
// can we do something like this ?
$background: $direction ? /* value */ : /* other value */;
@nickcooley
Copy link

Yes, looks like

$background: if($direction, /*value*/, /*other value*/);

@elisechant
Copy link

Added to SASS 3.1.2 chriseppstein/sass@b9a9e14

@elisechant
Copy link

you could mimic the behaviour with your own functions like,

@function if($condition, $if-value, $else-value) {
    @if ($condition == true) {
        @return $if-value;
    } @else {
        @return $else-value;
    }
}

@chriseppstein
Copy link

In sass 3.3, the if function only evaluates the argument that corresponds to the condition. This makes the if function as powerful as the @if directive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment