用SCSS命名CSS网格线 [英] Named CSS grid lines with SCSS

问题描述

我正在尝试使用新的 CSS网格布局系统在 codepen.io 中.它具有一个有趣的功能，称为命名网格线，该功能允许为列和行之间的网格线定义自定义名称.不幸的是，我似乎无法使用该功能，因为SCSS不赞成[line-name]语法.

I'm experimenting with the new CSS Grid Layout system in codepen.io. It has an interesting feature called named grid lines that allows defining custom names for the grid lines between the columns and rows. Unfortunately I can't seem to get the feature to work because SCSS doesn't approve of the [line-name] syntax.

#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预处理程序(以及我尝试过的所有其他编译器)拒绝编译整个内容，并说Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

The code above should create a CSS grid that has two 100px wide columns on the sides with a column that fills the rest of the element's width in the center. This part works fine. I then try to give the grid lines custom names and place the .one element in the middle column but Codepen's SCSS preprocessor (as well as all the other compilers I've tried) refuses to compile the whole thing, saying Invalid CSS after "...plate-columns: ": expected expression (e.g. 1px, bold), was "[main-start] 10..."

是否有某种方法可以强制SCSS在不解析它​​的情况下按原样编译该样式(或以其他可编译的方式表示该样式)，还是我必须用常规CSS重写实验?

Is there some way to force SCSS to compile this style as-is without parsing it (or express this in another way that compiles) or will I have to rewrite my experiment with regular CSS?

推荐答案

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

Try putting whole your CSS line to string:

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

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

这篇关于用SCSS命名CSS网格线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！