Question

我在星期五晚上有这个，我已经堆满了。尝试在当前项目 $ breakpoint 周围添加引号，并产生如下输出 a [data-x =“ bp1”] a [data-x =“ bp2”] ... 等等但是相反，正如您所猜测的，我有 a [data-x = bp2]

$spacings: "8%", "9%", "10%", "11%", "13%", "14%";


@each $breakpoint in $breakpoints {
    a[data-x=#{$breakpoint}] {
        .span {
            margin-left: nth($spacings, index($breakpoints, $breakpoint));
        }
    }
}

any help will be highly appreciated!

Answer 1

您需要使用\将引号引起来，以将其保留在已编译的CSS中。

您可以将断点的名称写为：

$breakpoints: "\"bp1\"", "\"bp2\"", "\"bp3\"", "\"bp4\"", ...;

或者只需将选择器写为a[data-x=#{"\"#{$breakpoint}\""}]：

$spacings: "8%", "9%", "10%", "11%", "13%", "14%";
$breakpoints: bp1, bp2, bp3, bp4, pb5, bp6; // Quotation marks not needed

@each $breakpoint in $breakpoints {
    a[data-x=#{"\"#{$breakpoint}\""}] {
        .span {
            margin-left: nth($spacings, index($breakpoints, $breakpoint));
        }
    }
}

另一种解决方案是在变量（或断点名称）周围使用单引号，然后使用unquote()：

a[data-x=#{unquote('"#{ $breakpoint }"')}]

在SASS循环中在当前列表项周围加上引号

1 个答案: