What's the SASS equivalent of Javascript's "var x = y || z"?

Viewed 102

Javascript

var x = y || z (logical-or operator)

x = y if y is not falsy, otherwise z 

What's the SASS/SCSS equivalent of Javascript's "var x = y || z"?

3 Answers

The !default flag, will have this variable skipped, if it already exists.

For example:

$var: foo;
$var: bar !default;

@debug $var; // foo

And:

$var: bar !default;

@debug $var; // bar

Update: since you clarified your question, this might be a better approach:

@function return($x, $y) {
  @return if(($x != false), $x, $y);
}

@debug return("foo", "bar"); // "foo"
@debug return (false, "bar"); // "bar

Double-pipe Operator

This construct is called "double-pipe operator" in JavaScript, and helps a lot in writing readable and clean code.

But I don't think SASS have something like it, sadly. The closest you can get to it is by using default values with the !default tag or the @if and @else flow controls.

Related