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

Question

我星期五晚上有这个，我已经堆放了。尝试在当前项目 $breakpoint 周围添加引号并产生如下输出 a[数据-x="bp1"] a[数据-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 循环中为当前列表项加上引号

Put a quotes around current list item in a SASS loop

list

loops

sass

each