CODEWITHSUNDEEP
sass
skyisred
skyisred

Reputation: 7105

SCSS: If statement inside a css rule

Is it possible to add sass if statements inside a css rule? To avoid repetition. I tried this, but sass complains about syntax.

@mixin outline($color, $shadow:'none') {

    text-shadow: 
        1px 0 0 $color,
        0 1px 0 $color, 
        0 -1px 0 $color, 
        -1px 0 0 $color

        @if $shadow != 'none' {
            , $shadow
        }
        ;
}

Upvotes: 0

Views: 155

Answers (1)

Alex Guerrero
Alex Guerrero

Reputation: 2149

You can declare an array to store all shadows and then append $shadow if conditional statement is true

@mixin outline($color, $shadow: false) {
  $shadows: (
    1px 0 0 $color,
    0 1px 0 $color, 
    0 -1px 0 $color, 
    -1px 0 0 $color);

  @if $shadow {
    $shadows: append($shadows, $shadow);
  }
  text-shadow: $shadows;
}

Check out the SASS append function reference

Upvotes: 1

Related Questions