CSS 网格的复杂混合

Question

我正在为使用 CSS 网格创建一个复杂的 mixin。目前我拥有的是你传入 no of cols、row-gap 和 column-gap 的 mixin，它 returns 你是一个 blob - 代码如下。

NB rem() 是我用来将 px 转换为 rem 的函数。

@mixin grid($grid-type, $no-of-cols, $row-gap, $columnn-gap: $row-gap) {
  @supports (display: grid) {
    display: grid;
    #{$grid-type}: repeat($no-of-cols, auto);
    grid-gap: rem($row-gap) rem($column-gap);
  }
}

这很好用，但问题是如果我想要一个更复杂的网格，例如，如果我想在其中使用 fr 值，我将如何实现这一点？我想我不能真正使用我上面得到的相同 mixin，因为它只会将网格分成相等的部分，因为我正在使用 repeat($no-of-cols auto)。

理想情况下，我想执行以下操作：

@mixin grid($no-of-cols$, $fractions) {
  @supports (display: grid) {
    //Here I want to take the number of $fractions and output something like
    grid-template-columns:1fr 1fr 2fr //if someone had passed in (3, 1, 1, 2)
  }
}

所以我想我真的想回答 2 个问题；

1) 我可以有一个 mixin/function 输出分数 (1fr 2fr) 和数字的网格吗（使用 repeat(3, auto) 2) 我是不是把它弄得太复杂了，这真的应该是一个 function/mixin 甚至 2 个 mixin 吗？

==============================

更新：所以我更新了最初的 Sass 函数，现在它的用法如下：

@include('grid-template-columns/rows', 5px, 5px)

我还将 $row-gap 设置为 $column-gap，因为如果在纯 CSS 中省略此参数，浏览器将只设置 grid-column-gap 等于 grid-row-gap时使用grid-gapshorthand。万一以后有人需要呢！

Answer 1

好的，以防万一将来有人需要使用它，这就是我想出的。虽然它达到了它的目的并且有效，但它并不完全是我的想法。我想也许正如我最初所说的那样，我试图过度设计我正在做的事情，现在不再需要了！

Sass

@mixin grid($grid-type, $args, $row-gap, $column-gap: $row-gap) {
  @supports (display: grid) {
    display: grid;
    #{$grid-type}: #{$args};
    grid-gap: rem($row-gap) rem($column-gap);
  }
}

说明

所以你可以从上面看到，我使用 $args 可以让你传递一些参数。因此，当我尝试创建一个场景，其中有人可以使用分数 (fr) 和相等框 (repeat([num], auto) 创建布局时，此方法允许我传入这两个。

例子用法如下：

@include grid('grid-template-rows', '1fr 2fr', 10px, 20px);

@include grid('grid-template-columns, 'repeat(3, auto)', 10px, 15px);

如您所见，这提供了使用 rows 和 columns 创建网格的灵活性，所以我认为这适用于我的场景。希望这对以后的人有帮助，它肯定对我有用。

CSS 网格的复杂混合

Complex mixin for CSS grid

html

css

sass

mixins