少编译网格列的问题

Question

属性 'grid-column'

有问题

---

Css:

.someClass {
   grid-column: 1 / 4;
}

少编译它在css中为：

.someClass {
   grid-column: 0.25;
}

---

但效果很好：

.someClass {
   grid-column-start: 1;
   grid-column-end: 4;
}

---

如何在 Less 中正确使用 属性 grid-column with '/' 符号？

Answer 1

使用 LESS 时必须转义为“斜线”：

.somClass {
    grid-column: 1 e("/") 4;
}

但是如果你有能力通过分解 css 属性 来绕过“斜线”而不是这样做（我个人认为这是更好的方法）。您还可以使用“~”符号来转义表达式，例如 ~"1/4"

Answer 2

试试这个

.someClass {
  grid-column: ~"1/4";
}