CSS网格的复杂混合 [英] Complex mixin for CSS grid

问题描述

我正在为使用CSS网格创建一个复杂的mixin。目前我所拥有的是一个mixin，您在 no col of cols ， row-gap 和 column-gap 并且它会返回一个blob - 代码位于下面。

注意 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）; 
 
 
 $ / code $ / pre 
 
 
这工作正常，但问题是如果我想要一个更复杂的网格，例如，如果我想要使用 fr 值，我将如何去实现这个目标？我想我不能真正使用上面得到的mixin，因为那样会将网格分割成相等的部分，因为我使用 repeat（$ no-of-cols auto）。 
 
 
 
我最好喜欢做以下事情： 
 
 
  @mixin grid（$不是$ cols $，$ fractions）{
 @supports（display：grid）{
 //在这里我想获取$分数并输出类似
 grid-template-columns：1fr 1fr 2fr //如果有人通过（3,1,1,2）
} 
} 
  
所以我想我真的想回答2个问题; 
 
 
 1）我可以有一个混合输入/函数，输出一个分数（1fr 2fr）&数字（使用 repeat（3，auto） 
 2）我是否使这个过于复杂，应该是一个函数/混合函数还是2个混合函数？ p> 
 
 
 ============================ 
 
 
 
更新：所以我更新了最初的Sass函数，现在它的用法如下：
 $ b 
  @include（' grid-template-columns / rows'，5px，5px） 
 
 
 
我还设置了 $ row-gap 到 $ column-gap ，因为如果在纯CSS中省略此参数，浏览器将只设置 grid-column-当使用 grid-gap 速记时，gap 等于 grid-row-gap  。以后任何人都需要这个！
解决方案
好，万一任何人需要将来使用这个，这就是我想出了。虽然它达到了它的目的和作用，但它并不完全符合我的想法。我认为也许正如我原先所说的那样，我试图过度设计我正在做的事情，现在已经不再需要了！
 
 
 
  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）; 
  
正如您所看到的，这可以灵活地使用行和列所以我会说这适用于我的情况。希望这可以帮助未来的人，这肯定对我有用。
 
I'm working on creating a complex mixin for using CSS grid. At the moment what I have is a mixin that you pass in the no of cols, row-gap and column-gap and it returns you a blob - code is below.

NB rem() is a function I'm using to convert px to 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);
  }
}
This works fine but the problem is if I want a more complex grid, for example, if I want to use the fr values in, how would I go about achieving this? I guess I can't really use the same mixin I've got above because that will just split the grid into equal parts as I'm using repeat($no-of-cols auto). 

I'd ideally like to do something like the following:
@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)
  }
}
So I guess really I'm trying to answer 2 questions;

1) Can I have one mixin/function that outputs both a grid in fractions (1fr 2fr) & numbers (using repeat(3, auto)
2) Am I making this overly complex and should this really be a function/mixin or even 2 mixins?

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

UPDATE: So I've updated the initial Sass function so it's usage is now as follows:

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

I've also set $row-gap to $column-gap since if this parameter is left out in pure CSS the browser will just set grid-column-gap to be equal to grid-row-gap when using the grid-gap shorthand. In case anyone needs this in future!
解决方案
Ok so in case anyone needs to use this in the future, this is what I came up with. While it serves its purpose and works it's not exactly what I had in mind. I think maybe as I originally said, I was trying to over-engineer what I was doing, which is now no longer necessary!

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);
  }
}
Explanation

So you can see from the above, I'm using $args which lets you pass a number of parameters. So as I was trying to create a scenario where someone could create a layout using both fractions (fr) and equal boxes using (repeat([num], auto), this method allows me to pass in both of these.

Example usage is as follows:
@include grid('grid-template-rows', '1fr 2fr', 10px, 20px);

@include grid('grid-template-columns, 'repeat(3, auto)', 10px, 15px);
As you can see this gives the flexibility to create a grid using both rows and columns so I'd say this works for my scenario. Hope this helps someone in future and it's certainly worked for me.

                        
这篇关于CSS网格的复杂混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！