css - SASS + 循环相邻的选择器并添加下降的 z-indexes

Question

我有一种方法可以得到我想要的东西，希望 SASS，简单的父子选择器来处理选项卡的 z-index。

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;};
    }
}

---

我的新解决方案。

我想要一种比上面显示的更简单的方法来添加子选择器。我添加了 z-indexes。

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);
}

希望这是有道理的。感谢您的帮助。

注意:我正在使用 Extjs 4.2.2/Sencha CMD 4 来处理我的 SASS 到 CSS，所以我只使用 SASS 3.0.2，所以@extend/%extendable 中断。

Answer 1

我想我可能找到了解决方案。它更基于功能，与我在上面添加的第一个 SASS 相比看起来有点重。我还添加了第二个选项卡实例，因为我需要将它包含在两个不同的类中。

/* * *
* 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 zindextab(section-a, 4);
@include zindextab(section-b, 8);

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

如果其他人有更好、更时尚的解决方案，一定要告诉我!