SASS + Cycle through Adjacent Selectors and add z-indexes that go down

Question

I have one way to get what I want wish SASS, the simple parent child selectors to handle the z-index of tabs.

SASS

//HANDLE THE Z-INDEXS for the SECTION TAB
$tab: 'a.x-tab.sectionbar-tab';
$active: 'a.sectionbar-tab.x-tab-active'; //Currently Active Tab

.section {
    &.tabs.x-tab-bar-plain {
        #{$tab}:first-child {z-index: 4 !important;};
        #{$active}:first-child {z-index: 4 !important;};
        #{$tab} + #{$tab} {z-index: 3 !important;};
        #{$tab} + #{$active} {z-index: 3 !important;};
        #{$tab} + #{$tab} + #{$tab} {z-index: 2 !important;};
        #{$tab} + #{$tab} + #{$active} {z-index: 2 !important;};
    }
}

My new solution.

I'd like a simpler way to add the child selectors than shown up above. I have the z-indexes being added in.

SASS

$tab: unquote("a.x-tab.sectionbar-tab");
$active: unquote("a.sectionbar-tab.x-tab-active"); //Currently Active Tab
$plustab: unquote("+ a.x-tab.sectionbar-tab");
$plusactive: unquote("+ a.sectionbar-tab.x-tab-active"); //Currently Active Tab

$appendedlist: append($tab, $plustab, space);
$activeappendedlist: append($active, $plusactive, space);

@mixin tab-type($tabtype) {
  @if $tabtype == eightabs {
    $items: 4;
    @while $items > 0 {
        &.tabs .x-tab-bar-plain {
          #{$appendedlist} {
             z-index: $items;
          }
          #{$activeappendedlist} {
             z-index: $items;
          }
        }
      $items: $items - 1;
    }
  }
}

.section {
  @include tab-type(eightabs);
}

Hopefully this makes sense. Any help is appreciated.

Note: I am using Extjs 4.2.2 / Sencha CMD 4 to process my SASS to CSS so I am only using SASS 3.0.2, so the @extend/%extendable breaks.

Kara · Answer 1 · 2014-07-10T20:46:38.250

I think I may have found a solution. It's more function based, and looks a little heavy in comparison to the first SASS I added above. I also added a second tab instance because I needed it included with two different classes.

/* * *
* zindextab FUNCTIONS
* * */

@function tabsate($state) {
  @if $state == normal {
    @return unquote("a.x-tab.sectionbar-tab");
  }
  @else if $state == active {
    @return unquote("a.zindextab-tab.x-tab-active");
  }
}

@function adjascentselectors($n, $state) {
  $tab: unquote("a.x-tab.zindextab-tab");
  $state: tabsate($state);
  @if $n == -1 {
    @return $state+unquote(":first-child");
  }
  @else if $n == 0 {
    @return append($tab, join(unquote("+ "), $state));
  }
  @for $i from 1 through $n {
    $new: unquote("+ a.x-tab.zindextab-tab");
    $tab: append($tab, $new);
  }
  @return append($tab, join(unquote("+ "), $state));
}

/* * *
* zindextab MIXIN
* * */

@mixin zindextab($tabtype, $n) {
  @for $i from -1 through $n {
    .#{$tabtype} {
      $tabs: $n - 1;
        &.zindextab .x-tab-bar-plain {
          #{adjascentselectors($i, normal)} {
            z-index: $tabs - $i;
          }
        }
        &.zindextab .x-tab-bar-plain {
          #{adjascentselectors($i, active)} {
            z-index: $tabs - $i;
          }
        }
    }
  }
}

Include in Code

@include zindextab(section-a, 4);
@include zindextab(section-b, 8);

https://gist.github.com/26b66d511bdbf42e07d3.git

If anyone else has a better, sleeker solution definitely let me know!

score 0 · Answer 2 · answered Feb 05 '15 at 13:42

This snipped creates a z-index stack for your element classes. I separated the elements into groups to make it more manageable. Now you can add groups and elements later on and all indexes are recalculated.

// your stack of elements
// note that the order goes from top (the lowest z-index) to bottom (the highest z-index)
$element-stack: (
    body: (
        wrap,
        wrap__left,
        wrap__right,
        wrap__center,
        wrap__top,
        wrap__content
    ),
    header: (
        main-header
    ),
    navigation: (
        burger-menu,
        sub-menu
    ),
    share: (
        share__trigger,
        share__list,
        share__elements
    )
);

// the loop creates the actual classes with z-index for you.
$group-index: 0;

@each $group, $elements in $element-stack {
    $element-index: 1;

    @each $class-name in $elements {

        .#{$class-name} {
            z-index: $group-index + $element-index;
        }
        $element-index: $element-index + 1;
    }
    $group-index: $group-index + 1000; // give groups enough space for subelements
}

it will print out this classes:

.wrap { z-index: 1; }
.wrap__left { z-index: 2; }
.wrap__right { z-index: 3; }
.wrap__center { z-index: 4; }
.wrap__top { z-index: 5; }
.wrap__content { z-index: 6; }
.main-header { z-index: 1001; }
.burger-menu { z-index: 2001; }
.sub-menu { z-index: 2002; }
.share__trigger { z-index: 3001; }
.share__list { z-index: 3002; }
.share__elements { z-index: 3003; }

SASS + Cycle through Adjacent Selectors and add z-indexes that go down

SASS

SASS

2 Answers2