SASS variables set inside of conditional?

Question

Can I set variables inside of an if / else conditional in SASS? Say for instance you wanted to have 2 color schemes for a page. Thinking in terms of setting a class on the body to handle the color differences, could you do the following (written for English, not attempting any kind of correct syntax):

If parent class is red then $main-color = #f00 else $main-color = #000

Can I do this?

Answer 1

Yes, this is possible:

$parent: true
$foo: red

@if $parent == true 
  $foo: blue

p
  color: $foo

codepen

It's worth noting, however, that you will not be able to use a conditional to check a property on a parent element (or any other element) in SASS (see this post from the SASS lead), so parent class in your psuedo code would have to be stored in a sass $variable.

Answer 2

You can use the function like this:

@function set-color($class) {
  @if ($class == red) {
    @return #f00;
  } @else {
    @return #000;
  }
}
$main-color = set-color($parent-class);