使用SASS通过回路嵌套选择器 [英] Nesting selectors via loops with SASS

问题描述

我有这个HTML

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

有可能在另一个循环嵌套列表，得到这样：

Is there any possible to loop nested lists one in another, to get something like this:

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

推荐答案

Sass版本3.4之前，你需要做的这个功能不是原生Sass的一部分（和递归mixins不工作在某些版本）。您需要Compass函数 nest（）。

For Sass versions prior to 3.4, the function you need to do this is not part of native Sass (and recursive mixins don't work in certain versions). You need Compass function called 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具有此函数的本机版本， code> selector-nest（）：

Sass 3.4 has a native version of this function called 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， this：

If you want to spell out the initial ul, then you would do it like this:

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个或更多的选择器，这是绝对必要的：

Note that you could use simple string concatenation instead of either of these functions, but it will only work in cases where you're only nesting a single selector. If you have 2 or more selectors, this is absolutely necessary:

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

这篇关于使用SASS通过回路嵌套选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！