sass - 解析 SASS 列表以查找项目是否为“真”并呈现 CSS 的一个实例

Question

我需要解析一个包含多个 3 项列表的列表，如下所示：

$myList (item1, "something", true),
        (item2, "something", false),
        (item3, "something", true);

并找出任何这些列表中的第三项是否等于true。在示例中，在第一个和第三个列表中，第三个项目是true。此外，我需要检测并渲染，仅针对其中的一个实例，基于它渲染一些 CSS。

@eachcontrol 指令可以解析它，但使用它的问题是它会为列表项为真的每种情况呈现 CSS。

@each $item in $myList {
    @if nth($item, 3) {
        [class*="item"] {
            float: left;
        }
    }
}

如果第一项和第二项设置为true，则上面将呈现：

[class*="item"] {
    float: left;
}
[class*="item"] {
    float: left;
}

有没有人有任何想法？

Answer 1

您可以将 CSS 移出循环并使用标志变量来跟踪是否应包含它。例如：

$use-float: false;

@each $item in $myList {
    @if nth($item, 3) {
        $use-float: true;
    }
}

@if $use-float {
    [class*="item"] {
        float: left;
    }
}