Skip to content

Instantly share code, notes, and snippets.

@cahnory
Last active August 29, 2015 14:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cahnory/7aa03e39d1303e188e72 to your computer and use it in GitHub Desktop.
Save cahnory/7aa03e39d1303e188e72 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
// path e.g. 'c.B'
$z-stack: (
a: 'just a comment', // 8
b: 2, // 7 @warn
c: ( // 4
A: auto, // 6
B: auto, // 5
),
d: 3, // 3
e: auto // 1
);
// split string
@function split-path($path) {
@if 'string' == type-of($path) {
$index: str-index($path, '.');
@if $index {
@return str-slice($path, 1, $index - 1), str-slice($path, $index + 1);
}
}
@return $path, null;
}
@function z-index($path, $stack: $z-stack, $from: 1, $parent: '') {
$path: split-path($path);
$name: nth($path, 1);
$child: nth($path, 2);
$min: $from;
$z: null;
// unknown layer
@if not map-has-key($stack, $name) {
@warn 'Unknown layer `#{$parent}#{$name}`';
}
@else {
$names: map-keys($stack);
$index: index($names, unquote($name)) or index($names, red);
// loop from back layer to current
@for $i from length($names) through $index {
$l: nth($names, $i);
$z: map-get($stack, $l);
@if 'map' == type-of($z) {
// targeted map
@if $name == $l {
@if $child {
// get child z-index
$z: z-index($child, $z, $min + 1, #{$name}#{'.'});
@if $z == null {
@return null;
}
}
@else {
// the map itself has an index just in case
$z: $min;
}
}
@else {
// get higher nested index
$z: z-index(nth(map-keys($z), 1), $z, $min + 1, #{$name}#{'.'});
}
}
// set min as auto
@else if auto == $z or 'number' != type-of($z) {
$z: $min;
}
// set min for unexpected value
@else if $z < $min {
@warn 'Wrong z-index for layer `#{$parent}#{$l}`';
$z: $min;
}
$min: $z + 1;
}
}
@return $z;
};
@mixin demo($stack, $parent: '') {
@each $name, $index in $stack {
#{$name} {
@if 'map' == type-of($index) {
/* generated for the map */
@include demo($index, #{$parent}#{$name}#{'.'});
}
@else {
/* #{$index} */
}
z-index: z-index(#{$parent}#{$name});
}
}
}
@include demo($z-stack);
a {
/* just a comment */
z-index: 8;
}
b {
/* 2 */
z-index: 7;
}
c {
/* generated for the map */
z-index: 4;
}
c A {
/* auto */
z-index: 6;
}
c B {
/* auto */
z-index: 5;
}
d {
/* 3 */
z-index: 3;
}
e {
/* auto */
z-index: 1;
}
@VincentSmedinga
Copy link

This is great. Is there a way to adapt this so that it can be used in plain Sass? Which of the functions depend on Compass?

@bleuebuzz
Copy link

Compass is used by default on SassMeister but this gist doesn't depend on it ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment