Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Stephen O'Connor
Stephen O'Connor
22,291 Points
Posted by Stephen O'Connor
Stephen O'Connor
22,291 Points

Sass Operator Question

Can someone please tell me why the use of parenthesis makes each of the below statements different? I was under the impression both had to be true to return true.

$alpha: red;
$beta: green;
$charlie: yellow;
$delta: red;

// Prints 'Winner!'
.block {
  @if $alpha == ($beta and $delta) {
    content: "Winner!";
  } @else {
    content: "Loser!";
  }
}

// Prints 'Loser!'
.block {
  @if $alpha == $beta and $delta {
    content: "Winner!";
  } @else {
    content: "Loser!";
  }
}

Thanks!

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

This is very interesting.

I added other variables with varying values to see what the output would be in order to try to grasp what is happening. Codepen example for the following.

$alpha: red;
$beta: green;
$charlie: yellow;
$delta: $alpha;
$list: (
  ($beta or $delta),
  ($beta and $delta),
  ($beta not $delta),
  ($beta and $delta and $charlie),
  ($beta not $delta or $charlie),
  ($beta and $delta not $charlie or $alpha),
  ($beta or $delta not $charlie and $alpha)
 );

@function output($l) {
  $r: "";
  @each $i in $l { 
    $r: $r + $i + "\A";
  } 
  @return $r;
}

.block:before {
  content: output($list);
  white-space: pre; //Needed for multi-line display
}

// Outputs:
green
red
green false
yellow
green yellow
red red
green false

It appears to me that when you are placing parenthesis after the == equality operator Sass thinks that this is a List.

Furthermore, when using logical operators (and, or, not) within a value of a list item there are some seemingly unusual yet consistent results. Although, when combing multiple logical operators where not is precluding both or and and that things can be somewhat more confusing because the results for or and and are opposite than if they were before not:

Logical Operator Before After
or accepted ignored
and ignored accepted [1]
not accepted Boolean
not/or ignored accepted [2]
not/and ignored Boolean [2] [3]

[1]: more than 1 and (as the only operator type) uses only the first Before and last After

[2]: column values based upon operator after not

[3]: when using multiple and's the last and is used so a Boolean is not given; meaning After is accepted, not Boolean

Even attempting to word this effectively was a little confusing... o.0

Please excuse the formatting.

Stephen O'Connor
Stephen O'Connor
22,291 Points
Stephen O'Connor
Stephen O'Connor
22,291 Points

Thanks for investigating this Sean. I was reading a Sass book when I came across the code example and the code confused me, and it still does haha. I'll have a further dig into it and see if I can get my head around it. Appreciate you looking at it in detail for me.