在 SASS 循环中为当前列表项加上引号答案

【问题标题】：Put a quotes around current list item in a SASS loop在 SASS 循环中为当前列表项加上引号
【发布时间】：2020-03-31 20:33:51
【问题描述】：

我周五晚上有这个，我已经堆积了。尝试在当前项目 $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!

【问题讨论】：

标签： list loops sass each

【解决方案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 }"')}]

【讨论】：

总理一号难看；前者更具可读性。不过，我感谢你的澄清。
是的，这就是我添加所有我能找到的解决方案的原因。 x)
@Vladyn 我实际上在 SassMeister 上尝试了这两种解决方案，它对我有用。您是否有机会使用 dart-sass？它似乎是唯一无法使用的编译器。
我说的是 SASSMeister 游乐场。你能分享那里的截图吗？
其实你是对的——唯一不起作用的方法是使用 LibSass，这就是我的情况。所有其他人都输出所需的结果。我会将其标记为答案。