What does || mean in Sass conditionals?


#1

https://www.codecademy.com/courses/learn-sass/lessons/functions-and-operations/exercises/if-vs-if

I’ve Googled this to no avail and the lesson does not explain. What does the || mean in these conditionals? I tried running this through an online SCSS compiler and it throws an error because of the || and won’t compile.

@mixin deck($suit) {
 @if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }
}

#2

It means logical OR. Likewise, && is logical AND.


#3

Thanks. How come it doesn’t compile, though? I wanted to play around with it to see how it worked, so entered the following SCSS into a SCSS compiler, but it throws an error

SCSS Compiler:
https://www.sassmeister.com/

Error:
Invalid CSS after "…suit == hearts ": expected “)”, was “|| $suit == spa…”

SCSS I posted:

@mixin deck($suit) {
 @if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   color: black;
 }
}

.playing-card-1 {
    @include deck(hearts);
}

.playing-card-2 {
    @include deck(spades);
}

.playing-card-3 {
    @include deck(clovers);
}

.playing-card-4 {
    @include deck(diamonds);
}

.playing-card-5 {
    @include deck(emeralds);
}

#4

To be honest, I have not ventured into SASS beyond the track course. I can see what you mean about not compiling. My previously complete and correct lesson code for this exercise is not compiling.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.