CODEWITHSUNDEEP
cssif-statementsassmixins
user11143445
user11143445

Reputation:

Syntax for if/else condition in SCSS mixins

I created a SASS @mixin which contains @if conditions to assign styling to elements based on their z-index property to create some sort of elevation.

However what ever I am trying it will not work out.

I'm pretty sure I am doing something just slightly wrong that affects everything else.

I'd appreciate your feedback. Thanks in advance!

    $background: #121212;
    $surface: #1f1f1f;
    $surface-shade_1: #282828;
    $surface-shade_2: #303030;
    %surface {
      background-color: $surface;
    }

    %surface-shade_1 {
      background-color: $surface-shade_1;
    }

    %surface-shade_2 {
      background-color: $surface-shade_2;
    }

    @mixin elevation($elevationValue) {
      @if $elevationValue>0 {
        @extend %surface;
      }
      @else if $elevationValue>4 or $elevationValue=4 {
        @extend %surface-shade_1;
      }
      @else if $elevationValue>8 or $elevationValue=8 {
        @extend %surface-shade_2;
      }
      z-index: $elevationValue * 50;
    }

    nav {
      @mixin elevation(4);
    }

Upvotes: 1

Views: 1143

Answers (1)

akaraabali
akaraabali

Reputation: 74

If you want to use @mixin inside the CSS files you can use like @include mixin-name and also use directly $elevationValue >= 4 instead of $elevationValue>4 or $elevationValue=4 it becomes much cleaner.

$background: #121212;
$surface: #1f1f1f;
$surface-shade_1: #282828;
$surface-shade_2: #303030;
%surface {
  background-color: $surface;
}

%surface-shade_1 {
  background-color: $surface-shade_1;
}

%surface-shade_2 {
  background-color: $surface-shade_2;
}

@mixin elevation($elevationValue) {
  @if $elevationValue > 0 {
    @extend %surface;
  }
  @else if $elevationValue >= 4 {
    @extend %surface-shade_1;
  }
  @else if $elevationValue >= 8 {
    @extend %surface-shade_2;
  }
  z-index: $elevationValue * 50;
}

nav {
  @include elevation(4);
}

Upvotes: 1

Related Questions