通过SASS循环嵌套选择器

Question

我有这个HTML

<ul> // first level
  <li>
    <ul></ul> // second level
  </li>
  <li>
    <ul> // second level
      <li>
        <ul></ul> // third level
      </li>
    </ul>
  </li>
</ul>

有没有可能将嵌套列表相互循环,得到这样的东西:

ul {
 padding: 10px;
 ul {
  padding: 20px;
  ul {
    padding: 30px;
    ... through 10 * ul
  }
 }
}  

有了这个我只有列表乘法.

@for $i from 1 through 10 {
    ul {
        padding-left: 100 - (10 * $i) + px;
    }
  }

Answer 1

对于3.4之前的Sass版本,您需要执行此操作的功能不是本机Sass的一部分(并且递归mixin在某些版本中不起作用).你需要调用Compass函数nest().

$sel: '';
@for $i from 1 through 10 {
    // remove !global flag if you're using Sass < 3.3
    $sel: if($i == 1, "ul", nest($sel, "ul")) !global;

    #{$sel} {
        padding-left: 10px * $i;
    }
}

Sass 3.4具有此函数的本机版本,称为selector-nest():

$sel: '';
@for $i from 1 through 10 {
    $sel: if($i == 1, "ul", selector-nest($sel, "ul")) !global;

    #{$sel} {
        padding-left: 10px * $i;
    }
}

输出:

ul {
  padding-left: 10px;
}

ul ul {
  padding-left: 20px;
}

ul ul ul {
  padding-left: 30px;
}

ul ul ul ul {
  padding-left: 40px;
}

ul ul ul ul ul {
  padding-left: 50px;
}

ul ul ul ul ul ul {
  padding-left: 60px;
}

ul ul ul ul ul ul ul {
  padding-left: 70px;
}

ul ul ul ul ul ul ul ul {
  padding-left: 80px;
}

ul ul ul ul ul ul ul ul ul {
  padding-left: 90px;
}

ul ul ul ul ul ul ul ul ul ul {
  padding-left: 100px;
}

如果你想拼出最初的ul,那么你会这样做:

ul {
    // parent styles
    border: 1px solid;

    $sel: '';
    @for $i from 2 through 10 {
        $sel: if($i == 2, 'ul', nest($sel, 'ul')); // note no !global flag

        #{$sel} {
            padding-left: 10px * $i;
        }
    }
}

请注意,您可以使用简单的字符串连接而不是这些函数中的任何一个,但它仅适用于您只嵌套单个选择器的情况.如果您有2个或更多选择器,这是绝对必要的:

$sel: '';
@for $i from 1 through 3 {
    $sel: if($i == 1, "article, section", selector-nest($sel, "article, section")) !global;

    #{$sel} {
      h1 {
        padding-left: 10px * $i;
      }
    }
}

输出:

article h1, section h1 {
  padding-left: 10px;
}

article article h1, article section h1, section article h1, section section h1 {
  padding-left: 20px;
}

article article article h1, article article section h1, article section article h1, article section section h1, section article article h1, section article section h1, section section article h1, section section section h1 {
  padding-left: 30px;
}