用 SCSS 命名的 CSS 网格线

Question

我正在试验新的 CSS Grid Layout system in codepen.io. It has an interesting feature called named grid lines，它允许为列和行之间的网格线定义自定义名称。不幸的是，我似乎无法使用该功能，因为 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 按原样编译此样式而不对其进行解析（或以另一种编译方式表达），或者我是否必须使用常规 [=22] 重写我的实验=]?

Answer 1

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

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

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

用 SCSS 命名的 CSS 网格线

Named CSS grid lines with SCSS

css

sass

css-grid