大佬教程收集整理的这篇文章主要介绍了SCSS:nth-child mixin with array,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我设置了一个网格模板,其中包含广告,位于不同的位置.导致代码结构有点复杂.基本上现在让我看起来恰到好处,我正在使用相当多的& nth-child选择器来删除各个断点处的/ ad边距.
而不是我写出的东西,如:
&:nth-child( 3 ),&:nth-child( 10 ),&:nth-child( 13 ),&:nth-child( 17 ),&:nth-child( 20 ),&:nth-child( 23 ),&:nth-child( 26 ),&:nth-child( 30 ),&:nth-child( 33 ),&:nth-child( 37 ),&:nth-child( 43 ) { margin-right: $gutter-width; }
我一直在尝试创建一个混合,允许我传递一个整数数组,并让css通过调用上面的内容来吐出我上面显示的内容.
@include nth-children( 3,10,13,17,20...) { margin-right: $gutter-width; }
唯一的问题是我还需要能够传递一个等式作为该列表的一部分(20n – 5)或任何情况.
我尝试过一些东西,但似乎无法接近它
@mixin nth-children($nths) { @for $i from 1 through length($nths) { &:nth-child(#{$i}) { @content; } }
}
我想阻止首先创建列表,因为值将在多种不同的屏幕尺寸和页面布局上不断变化.
$gutter-width: 12px; $array: ("2n+1","1","2"); div { @each $i in $array { &:nth-child( #{$i} ) { margin-right: $gutter-width; } } }
要保持单行:
@function nth-child-adder($item) { @return "&:nth-child(" + $item + ")"; } @function nth-child-namer($array) { $x: ""; @each $i in $array { @if $x != "" { $x: append($x,"," + nth-child-adder($i)); } @else{ $x: append($x,nth-child-adder($i)); } } @return $x; } $gutter-width: 12px; $array: ("2n+1","2"); div { #{nth-child-namer($array)} { margin-right: $gutter-width; } }
以上是大佬教程为你收集整理的SCSS:nth-child mixin with array全部内容,希望文章能够帮你解决SCSS:nth-child mixin with array所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。