使用SCSS为CSS网格线命名

Question

我正在尝试使用CSS Grid Layout系统来进行 codepen.io 上的实验。它有一个有趣的功能，叫做命名网格线，可以定义自定义名称的列和行之间的网格线。不幸的是，由于 SCSS 不支持 [line-name] 语法，我似乎无法让该功能工作。

#container.named {
  grid-template-columns: [main-start] 100px [content-start] 1fr [content-end] 100px [main-end]; // Will not pass SCSS validation :(

  .one {
    grid-column: content-start / content-end;
  }
}

以上代码应该创建一个 CSS 网格，具有两个宽度为 100 像素的侧栏和填充元素其余宽度的中心列。这一部分工作正常。然后我尝试给网格线自定义名称并将 .one 元素放在中间列，但 Codepen 的 SCSS 预处理器（以及我尝试过的所有其他编译器）都拒绝编译整个内容，并显示错误信息：Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..." 是否有一种方法可以强制 SCSS 不解析这个样式而按原样编译它（或者用另一种方式表达它），还是我必须使用普通的 CSS 重写我的实验？

- Kaivosukeltaja

---

你能不能更清楚地解释一下你在这里想要做什么？ - Mr. Alien

@Mr.Alien，已添加说明和 MDN 文档链接。 - Kaivosukeltaja

啊，你在寻找字符串插值 :) - Mr. Alien

说句实话，使用 unquote(..) 函数也可以起作用。 - user1705630

Answer 1

尝试将整个 CSS 行放入字符串中：

$gridTplCols: "[main-start] 100px [content-start] 1fr [content-end] 100px [main-end]";

grid-template-columns: #{$gridTplCols};

- Justinas

---

指南针编译器应该能够解决这个问题，但是暂时这个解决方案非常完美，谢谢！ - Jos