Last active
October 8, 2015 22:59
-
-
Save tameraydin/85ab4e9d2040601e1ca2 to your computer and use it in GitHub Desktop.
A solution for handling of z-indexes in complex apps.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
$layers: | |
'-1|underlay', | |
'base', | |
'header', | |
'999|an-overlay', | |
'another-overlay' | |
; | |
/* | |
A mixin that provides calculated z-index value of a given layer | |
(Layer must be predefined in $layers SCSS list). | |
By using this mixin you don't explicitly define your z-index values in declaration blocks | |
but just add it as a layer here, so you can have a full control over your z-indexes in one place. | |
*/ | |
@mixin z-index($layer, $addition: 0) { | |
$START_FROM: 0; | |
$INCREMENT_BY: 1; | |
$zIndex: -1; | |
$customizedLayers: 1; | |
@for $index from 1 through length($layers) { | |
$currentItem: nth($layers, $index); | |
$currentLayer: $currentItem; | |
@if $index - $customizedLayers == 0 { | |
$zIndex: $START_FROM; | |
} @else { | |
$zIndex: max($zIndex + 1, $index - $customizedLayers) + $INCREMENT_BY - 1; | |
} | |
$separatorIndex: str-index($currentLayer, '|'); | |
@if $separatorIndex { | |
$customizedLayers: $customizedLayers + 1; | |
$currentLayer: str-slice($currentItem, $separatorIndex + 1, str-length($currentItem)); | |
$fixedZIndex: str-slice($currentItem, 0, $separatorIndex - 1); | |
$zIndex: to-number($fixedZIndex); | |
} | |
@if $currentLayer == $layer { | |
z-index: $zIndex + $addition; | |
} | |
} | |
} | |
@function to-number($value) { | |
/* | |
A helper function that casts a string into a number. | |
http://hugogiraudel.com/2014/01/15/sass-string-to-number/ | |
http://sassmeister.com/gist/9fa19d254864f33d4a80 | |
*/ | |
@if type-of($value) == 'number' { | |
@return $value; | |
} @else if type-of($value) != 'string' { | |
$_: log('Value for `to-number` should be a number or a string.'); | |
} | |
$result: 0; | |
$digits: 0; | |
$minus: str-slice($value, 1, 1) == '-'; | |
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); | |
@for $i from if($minus, 2, 1) through str-length($value) { | |
$character: str-slice($value, $i, $i); | |
@if not (index(map-keys($numbers), $character) or $character == '.') { | |
@return to-length(if($minus, -$result, $result), str-slice($value, $i)) | |
} | |
@if $character == '.' { | |
$digits: 1; | |
} @else if $digits == 0 { | |
$result: $result * 10 + map-get($numbers, $character); | |
} @else { | |
$digits: $digits * 10; | |
$result: $result + map-get($numbers, $character) / $digits; | |
} | |
} | |
@return if($minus, -$result, $result); | |
} | |
#underlay { | |
@include z-index('underlay'); | |
} | |
.content { | |
@include z-index('base'); | |
} | |
.header { | |
@include z-index('header'); | |
} | |
#an-overlay { | |
@include z-index('an-overlay'); | |
} | |
.another-overlay { | |
@include z-index('another-overlay'); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
A mixin that provides calculated z-index value of a given layer | |
(Layer must be predefined in $layers SCSS list). | |
By using this mixin you don't explicitly define your z-index values in declaration blocks | |
but just add it as a layer here, so you can have a full control over your z-indexes in one place. | |
*/ | |
#underlay { | |
z-index: -1; | |
} | |
.content { | |
z-index: 0; | |
} | |
.header { | |
z-index: 1; | |
} | |
#an-overlay { | |
z-index: 999; | |
} | |
.another-overlay { | |
z-index: 1000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment