[@ ASS在@mixin中插入属性

Question

[每次尝试设置带有跨度的网格列时，我都试图找到一种在-mixin中自动插入-ms-grid-column-span属性的方法。

由于我的商店有很多来自IE的访问权限，因此我需要为其调整网格。请看看我的代码：

我的@mixin：

@mixin grid($row, $column, $gap) {
    display: grid;
    grid-template-rows: $row;
    grid-template-columns: $column;
    grid-gap: $gap;
}
@mixin grid-child($row, $column) {
    grid-row: $row;
    grid-column: $column;
}

我怎么称呼我的@mixin：

.anyclass {
   @include grid(auto, 1fr 1fr 1fr, 15px);
   .anyclass-child {
      @include grid-child(1, 2);
   }
}

我想做什么：包括@include grid-child($row, $column);这样的子网格，并在mixin中验证$column是否包含'span'，然后使用正确的值自动插入-ms-grid-column-span。

例如

grid-template-column: 1fr 1fr 1fr
grid-gap: 15px

在IE中，此代码应为-ms-grid-template-column: 1fr 15px 1fr 15px 1fr。

[grid-column: 1 / span 3应该是：

-ms-grid-column: 1
-ms-grid-column-span: 5

然后，在这种情况下，我希望@function自动计算并插入-ms-grid-column-span: 5属性。

有可能吗？有其他选择吗？

Answer 1

这是您的两个答案：

一个：自动计算（不推荐）

@supports (grid-template-column: $column) {
  grid-template-column: $column;
}

@supports (-ms-grid-template-column: $column) {
  -ms-grid-template-column: $column;
}

/*
Or...

@supports not (grid-template-column: $column) {
  // etc...
}

*/

不推荐这样做的唯一原因是因为它可能会增加延迟！

两个：只要写下来！

无需“自动计算”该值。也在那里写-ms-grid-template-column！如果浏览器不是IE，它将忽略它并继续运行。如果在IE中，它将忽略其他命令，仅执行-ms-grid-template-column！轻松并减少延迟！

@mixin etc... {
  grid-template-columns: $column;
  -ms-grid-template-columns: $column;
}