scss mixins_使用Family.scss Mixins自动化：nth-​​child选择器

这些混合器的工作方式类似于自动代码或您在主Sass文件中调用的函数 。 有些mixin更通用，而另一些则非常具体，例如Family.scss库 。

这个免费的库提供26个mixins，用于运行复杂的:nth-child选择器，而无需记住所有代码。

大多数开发人员都知道:nth-child选择器，默认情况下，它并不复杂。 您只需传递一个数字选择器 ，例如:nth-child(2) ，其中所属样式规则将应用于父元素的每个第二个子元素。

但是，当您要选择动态元素 （例如第一个和最后一个）或要选择少量元素 （例如前三个子元素 ）时，这可能变得更加复杂。

这是Family.scss可以提供帮助的地方。 这是一个很小的库，它包含26种针对子选择器的解决方案， 范围从基本到超复杂 。 每个mixin的主页上都有一个演示，您可以根据需要浏览和过滤。

以下是一些有趣的示例，以展示此库可以做什么：

• after-first(5) –选择前5个子元素之后的所有元素
• from-end(3) –选择第三个倒数第二个子元素
• all-but(3) –选择除第三个孩子以外的所有孩子
• even-between(3, 12) –选择第3个和第12个元素之间的所有偶数子元素

您可以浏览数十种内容，并且每个都有演示，以帮助您直观地了解它们的工作方式。

一些高级混入依赖于数量查询 ，这些查询会选择“至少”或“最多”固定在一定范围内的元素。 例如，您可以为具有至少5个（或更多）子代的父元素选择所有子代。

这些想法在阅读时可能会造成混淆，但是现场演示确实使一切变得清晰。

要深入研究，您可以从GitHub存储库中下载此mixin库的副本 ，以及所有这些演示。 并且，您可以在Twitter @LukyVJ上与项目的创建者分享您的想法或问题。

翻译自: https://www.hongkiat.com/blog/automate-nth-child-selectors-family-scss/