Skip to content

Instantly share code, notes, and snippets.

@tameraydin
Last active October 8, 2015 22:59
Show Gist options
  • Save tameraydin/85ab4e9d2040601e1ca2 to your computer and use it in GitHub Desktop.
Save tameraydin/85ab4e9d2040601e1ca2 to your computer and use it in GitHub Desktop.
A solution for handling of z-indexes in complex apps.
// ----
// 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');
}
/*
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