所以我希望有人可以用一些看似简单的东西来帮助我.
我设置了一个网格模板,其中包含广告,位于不同的位置.导致代码结构有点复杂.基本上现在让我看起来恰到好处,我正在使用相当多的& 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;
}
}
