如何从Sass列表中删除所有其他项?

时间:2015-08-07 15:34:35

标签: sass css-preprocessor

假设我有一个Sass列表:

$list: 1, red, banana, gold, [class*="test"], potato

如何删除每个第1,第3,第5项等?或者,每隔2号,4号,6号等等?这甚至可能吗?

我认为你需要遍历每个选择器,检查它的索引是否是奇数/偶数,然后根据需要删除该项。

我的伪代码:

@each $item in $list {
    @if $item == nth($list, 2n) {
       $list: remove($list, $item);
    }
}

作为一名非编程人员,我不确定上述内容是多么合乎逻辑 - 当然假设remove()是有效函数,而“2n”代表任何偶数项。

2 个答案:

答案 0 :(得分:1)

与CSS中的nth-child不同,nth()函数只能使用specific number

解决此问题的一种方法是手动查询当前迭代并将与当前数字不匹配的内容附加到新列表中。

$list: 1, red, banana, gold, potato;
$newList: ;
$i: 0;
@each $item in $list {
    $i: $i + 1;
    @if $i == 2 {
        $i: 0;
    }@else{
        $newList: append($newList, $item);
    }
}

@each $item in $newList {
    /* #{$item} */
}

Live Demo

答案 1 :(得分:1)

这个派对稍晚,但是,可以选择将新内容推送到您可能感兴趣的新列表中。

理论上你的伪代码在正确的轨道上。基本上简单地检查奇数/偶数值并相应地采用模数运算来实现 - 在编程语言中使用%符号。

所以使用一个非常香草的例子



$list: 'a','b','c','d','e';
$i: 0;

@each $item in $list {
    $i: $i+1;
    @if $i % 2 == 0
    {
	@debug "it's an even index: " + $item;    
      	$list: remove($list, $item);
    }
}