Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does Sass have a switch function?

Tags:

With Sass' ability to use variables, one would hope there is a large set of logic functions we can do with them.

Is there a way to do something like this?

$someVar: someValue !default;  @switch $someVar {     @case 'red':         .arbitrary-css here {}      @break;      @case 'green':         .arbitrary-css here {}      @break;      @case 'blue':         .arbitrary-css here {}      @break; } 

However, I can't find anything in the Sass reference about this.

like image 762
Bryce Avatar asked May 13 '13 06:05

Bryce


People also ask

How many types of functions are there in Sass?

Sass include various function for string, numeric, list, map, selector and introspection.

Can we use conditions in SCSS?

No, We can not use if-else conditions in CSS as CSS doesn't support logics. But we can use some alternatives to if-else which are discussed below: Method 1: In this method, we will use classes in HTML file to achieve this.

What is Sass function?

In addition to user-defined function, Sass provides a substantial core library of built-in functions that are always available to use. Sass implementations also make it possible to define custom functions in the host language. And of course, you can always call plain CSS functions (even ones with weird syntax).


1 Answers

No there isn't any supported switch statement in sass but if you only need to use the switch statement to tweak a variable, you can use sass maps in a switch statement sort of way.

Using SASS maps in place of a switch statement

$newVar: map-get((     case_1_test_name : case_1_return_value,     case_2_test_name : case_2_return_value, ), $testVar); 

So here's an example:

$vehicle: car;  $vehicleSeating: map-get((     car : 4,     bus : 20, ), $vehicle);  //$vehicleSeating = 4 

The above example translated into if/else statements:

$vehicle: car;  @if ($vehicle == 'car') {     $vehicleSeating: 4; } @else if ($vehicle == 'bus'){     $vehicleSeating: 20; }  //$vehicleSeating = 4 
like image 81
Daniel Tonon Avatar answered Oct 06 '22 11:10

Daniel Tonon