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

Posted 2023-03-16

【中文标题】在 SASS 循环中为当前列表项加上引号

【英文标题】：Put a quotes around current list item in a SASS loop

【发布时间】：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!

【参考方案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，这就是我的情况。所有其他人都输出所需的结果。我会将其标记为答案。