CSS网格的复杂混合答案

【问题标题】：Complex mixin for CSS gridCSS网格的复杂混合
【发布时间】：2017-08-22 19:55:00
【问题描述】：

我正在为使用 CSS 网格创建一个复杂的 mixin。目前我有一个 mixin，你传入 no of cols、row-gap 和 column-gap，它会返回一个 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) 我是否让这个过于复杂，这真的应该是一个函数/mixin 还是 2 个 mixin？

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

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

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

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

【问题讨论】：

在第一段中，你谈到了rows，但后面真的是columns
@vals 对不起，我的意思是列，现在更正。

标签： html css sass mixins

【解决方案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 创建网格的灵活性，所以我认为这适用于我的场景。希望这对将来的某人有所帮助，并且肯定对我有用。

【讨论】：