Question

我正在创建一个使用CSS网格的复杂mixin。目前我所拥有的是你在no of cols，row-gap和column-gap传递的mixin，它会返回一个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)＆amp;的网格。数字（使用repeat(3, auto) 2）我是否过于复杂，这应该是一个函数/ mixin甚至是2个mixins？

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

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

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

我还将$row-gap设置为$column-gap，因为如果在纯CSS中遗漏此参数，浏览器在使用时只会将grid-column-gap设置为等于grid-row-gap grid-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创建网格提供了灵活性，因此我认为这适用于我的方案。希望这有助于将来的某些人，这肯定对我有用。

用于CSS网格的复杂混合

1 个答案: