SCSS: If statement inside a css rule

Question

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
        }
        ;
}

Alex Guerrero · Accepted Answer · 2013-11-28 00:35:35Z

1

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

answered Nov 28, 2013 at 0:35

Alex Guerrero

2,1591 gold badge21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SCSS: If statement inside a css rule

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related