Question

我正在CSS Grid Layout system中尝试新的codepen.io。它有一个名为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网格，其两侧有两个100px宽的列，其中一列填充了中心元素宽度的其余部分。这部分工作正常。然后我尝试给网格线自定义名称，并将.one元素放在中间列，但Codepen的SCSS预处理器（以及我尝试过的所有其他编译器）拒绝编译整个事情，说{{ 1}}

有没有办法强制SCSS按原样编译这个样式而不解析它（或用另一种编译方式表达）或者我是否必须用常规CSS重写我的实验？

Answer 1

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

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

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

使用SCSS命名的CSS网格线

1 个答案: