I created a SASS @mixin wich 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);
}
Aucun commentaire:
Enregistrer un commentaire