Conditional statements with SCSS

Question

Does anyone know if this is possible:

I want my brand colour to be $brand: #00cccc;

however, I want to change that on just one page, and that page is defined by a class on it's body.

body class="purple"

Now my mind is thinking that this would be ideal:

body.$class { 
    @if $class == 'purple'
    { 
        $brand = #ff0033;
    }
    @else 
    {
        $brand = #00cccc;
    }
}

But that's not correct syntax at all.

Is this something that can be done in a similar way?

Solution

I believe you are looking for something like this?

@each $class in purple, none {
  $brand: #00cccc;
  $selector: 'body';
  @if $class == purple {
    $brand: #ff0033;
    $selector: 'body.' + $class;
  }
  #{$selector}{
    /* Use $brand */
  }
}

Comments

[Andrew Lazarus]

This would mean redeclaring all the styles again, effectively, reducing my love for scss