CSS网格的复杂混合

Question

我正在努力创建一个复杂的mixin来使用CSS网格。目前我有一个混合in，你在no of cols中传递，row-gap和column-gap，它会返回一个blob - 代码如下。

NBrem()是我用来将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/函数，以分数(1fr 2fr)和数字输出网格(使用repeat(3, auto)2)我是否使这过于复杂，这真的应该是一个函数/混音还是2个混音？

====

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

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

我还$row-gap设置为$column-gap因为如果在纯 CSS 中省略此参数，浏览器在使用grid-gap速记时只会将grid-column-gap设置为等于grid-row-gap。以防将来有人需要这个！

Answer 1

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

萨斯

@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创建网格的灵活性，因此我认为这适用于我的方案。希望这对将来的某人有所帮助，这当然对我有用。