利用 SASS 简化 `nth-child` 样式的生成

利用 SASS 简化 `nth-child` 样式的生成,第1张

概述考察如下的 HTML 片段,通过 CSS 的 nth-child() 伪选择器实现列表的颜色循环,比如每三个一次循环。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li></ul> 很容易地,我们能得出如下样式代码: ul { li:nth-child(3n + 1) {

考察如下的 HTML 片段,通过 CSS 的 nth-child() 伪选择器实现列表的颜色循环,比如每三个一次循环。

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li></ul>

很容易地,我们能得出如下样式代码:

ul {  li:nth-child(3n + 1) {    color: indigo;  }  li:nth-child(3n + 2) {    color: red;  }  li:nth-child(3n + 3) {    color: green;  }}

以上,只三种颜色循环,简单情况下可这样处理。但样式多起来之后,上面代码显得很臃肿且不易维护。

既然是使用 SASS,很容易想到可通过编写循环语句来将其简化

循环过程就是遍历一个预设的颜色列表,为每一个颜色生成相应的样式。

List & Map

首先需要定义一个对象来保存预设的颜色列表,SASS 中的 Lists 可满足条件。

$colors: indigo,red,green;

使用上面的 List:

$colors: indigo,green;@each $color in $colors {  .color-#{$color} {    color: $color;  }}

编译后输出:

.color-indigo {  color: indigo;}.color-red {  color: red;}.color-green {  color: green;}

当然,也可以定义 Map 类型,为每种颜色指定名字,这样使用的时候比较语义:

$colors: (  "indigo": indigo,"red": red,"green": green);@each $name,$color in $colors {  .color-#{$name} {    color: $color;  }}
索引

列表对象及其遍历如上,现在还需要在遍历过程中获得一个 index 索引值,用于生成 3*n+index

通过 index() 函数可以达到目的:

$colors: (indigo,green);@each $color in $colors {  $index: index($colors,$color);  .color-#{$index} {    color: $color;  }}

编译后输出:

.color-1 {  color: indigo;}.color-2 {  color: red;}.color-3 {  color: green;}
生成 nth-child 样式

结合上面所有,可以得出生成 nth-child 样式的代码:

$colors: (indigo,green);ul {  @each $color in $colors {    $index: index($colors,$color);    li:nth-child(3n + #{$index}) {      color: $color;    }  }}

编译后输出:

ul li:nth-child(3n + 1) {  color: indigo;}ul li:nth-child(3n + 2) {  color: red;}ul li:nth-child(3n + 3) {  color: green;}

注意到 nth-child(3n + #{$index}) 中的 3 是硬编码。既然我们的颜色是在一个数组中,所以我们是知道总个数的,也就能替换掉这里硬编码的写法。

通过 length() 函数可获得 List 的长度。改进后的代码如下:

$colors: (indigo,$color);    li:nth-child(#{length($colors)}n + #{$index}) {      color: $color;    }  }}

这样,如果后续有颜色增加,或顺序的调整,我们只需要更新 $colors 变量的值即可。

@mixin

进一步,我们可以将上面遍历生成 nth-child 的代码抽取成 mixin,这样可以被其他地方使用。

$colors: (indigo,green);@mixin nth-color {  @each $color in $colors {    $index: index($colors,$color);    li:nth-child(#{length($colors)}n + #{$index}) {      color: $color;    }  }}ul {  @include nth-color;}
mixin 的优化

但像上面这样还不能达到完全公用,因为 mixin 中使用了 li 选择器,不是所有需要 nth-child 样式的地方,都使用的 li 元素,所以此处需要进行优化,使得 mixin 中的这部分内容灵活一点,以适用不同的使用环境。

首先,使用 & 父选择器便可快速解决,这样生成的样式便由包含这个 mixin 的选择器决定了。

$colors: (indigo,$color);    &:nth-child(#{length($colors)}n + #{$index}) {      color: $color;    }  }}ul {  li {    @include nth-color;  }}

诚然,这样修改过后,确实可以将该 mixin 使用于多个地方了。

但考虑这么一种情况,因为上面列表比较简单,更加常见的情况是,列表中是另外复杂的元素,而不是单纯的一个元素,比如像下面这样:

<ul>  <li>    <div classname="item">      <h3>Title</h3>      <div>desc goes here...</div>    </div>  </li>  <li>    <div classname="item">      <h3>Title</h3>      <div>desc goes here...</div>    </div>  </li>  <li>    <div classname="item">      <h3>Title</h3>      <div>desc goes here...</div>    </div>  </li></ul>

现在想针对列表元素中的 h3 进行颜色的设置,即 nth-child 中设置的 color 只针对 h3 而不是整个 li 元素。

结合前面的优化,似乎可以这样写:

$colors: (indigo,red,green);@mixin nth-color {  @each $color in $colors {    $index: index($colors,$color);-    &:nth-child(#{length($colors)}n + #{$index}) {+    &:nth-child(#{length($colors)}n + #{$index}) h3{      color: $color;    }  }}ul {  li {    @include nth-color;  }}

编译后的结果:

ul li:nth-child(3n+1) h3 {  color: indigo;}ul li:nth-child(3n+2) h3 {  color: red;}ul li:nth-child(3n+3) h3 {  color: green;}

从结果来看,达到了目标。但又在 nth-color 这个 mixin 中引入了 h3,使其变得不再通用,问题又回到了之前。

所以 & 只解决了 nth-child 父级嵌套的问题,对于 nth-child 后面还需要自定义选择器的情况,就需要用别的方式进一步优化。

@mixin 传参

mixin 是可以接收参数的,通过外部传递选择器进来,可以达到将 h3 从 mixin 从剥离的目的。

@mixin nth-color($child) {  @each $color in $colors {    $index: index($colors,$color);    &:nth-child(#{length($colors)}n + #{$index}) #{$child}{      color: $color;    }  }}ul {  li {    @include nth-color("h3");  }}
@mixin 将参数传递到外面

最后,nth-color 这个 mixin 还有一处不够灵活的地方,便是其样式内容。

现在在其中写死了只有一个 color: $color; 属性,也就是说,使用该 mixin 的地方只能用它来设置元素的字色。如果 mixin 能够将颜色传递出来,这样外部使用的时候就可以用到其他属性上,更加的灵活了。

SASS 确实也提供了这么种机制,即 mixin 能够身外传递参数,借助 @content 指令。

@content 指令指代调用 mixin 时书写的模式内容部分。如下的代码直观展示了其功能:

@mixin nth-color($child) {  @each $color in $colors {    $index: index($colors,$color);    &:nth-child(#{length($colors)}n + #{$index}) #{$child}{      color: $color;+      @content;    }  }}ul {  li {-    @include nth-color("h3")+    @include nth-color("h3"){+      border:1px solID orange;+    };  }}

编译后内容为:

ul li:nth-child(3n+1) h3 {  color: indigo;  border: 1px solID orange;}ul li:nth-child(3n+2) h3 {  color: red;  border: 1px solID orange;}ul li:nth-child(3n+3) h3 {  color: green;  border: 1px solID orange;}

可以看到,外部书写的 border: 1px solID orange; 通过 @content 指代而放进了每个 nth-child 样式中。只是这个 border 的颜色现在还是写死的 orange,现在来将其设置成跟随相应的字色,即跟着 color 属性走。

当我们使用 @content(<arguments...>) 形式的 @content 时,可以传递一些参数,外部调用该 mixin 时需要使用如下形式来获取传递的参数:

@include <name> using (<arguments...>)
最终的 mixin

所以,最终版的代码为:

$colors: (indigo,green);@mixin nth-color($child) {  @each $color in $colors {    $index: index($colors,$color);    &:nth-child(#{length($colors)}n + #{$index}) #{$child} {      color: $color;      @content ($color);    }  }}ul {  li {    @include nth-color("h3") using($color) {      border: 1px solID #{$color};    }  }}

编译后得到的 CSS:

ul li:nth-child(3n+1) h3 {  color: indigo;  border: 1px solID indigo;}ul li:nth-child(3n+2) h3 {  color: red;  border: 1px solID red;}ul li:nth-child(3n+3) h3 {  color: green;  border: 1px solID green;}
总结

通过将生成 nth-child 样式的规则自动化的过程中,顺带使用了 SASS 中另外一些特性,

定义和使用数组及对象 数组及对象的遍历 遍历过程中索引的获取 @mixin 的使用,参数的传递 @mixin@content 的使用 @mixin 中向外传递参数 相关资源 :nth-child() SASS documentation - Lists SASS documentation - Maps @content
总结

以上是内存溢出为你收集整理的利用 SASS 简化 `nth-child` 样式的生成全部内容,希望文章能够帮你解决利用 SASS 简化 `nth-child` 样式的生成所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1030053.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存