使用Pocket Grid为响应网格创建无CSS混音

我有以下HTML代码：

<div class="wrapper">    
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
  <div><img src="http://placehold.it/400x200"/></div>
</div>

问题

是否可以创建一个较少的Mixin，以便我可以重用它在一个页面中创建多个网格，并将列数和边沟数指定为参数

我试图更改代码，但由于扩展，我总是遇到问题

有人能帮我把这段代码混合起来吗

我希望能够使用这样的东西：

.wrapper_1 {

  @media screen and (max-width: 760px) { make(2, 8px) }

  @media screen and (min-width: 761px) { make(4, 12px) }

  &:extend(.block-group);

  div {
    &:extend(.block);
  }

}

在同一页中使用另一个包装器并执行类似操作：

.wrapper_2 {

  @media screen and (max-width: 760px) { make(4, 12px) }

  @media screen and (min-width: 761px) { make(8, 16px) }

  &:extend(.block-group);

  div {
    &:extend(.block);
  }

}

谢谢,，

---

米格尔

我不能百分之百确定你所追求的确切产出，但我相信下面给出了你想要的东西的本质，它至少会让你得到你想要的东西，让你得到你想要的东西

.setGrid(
    @maxCols: 2; 
    @maxGutter: 8px; 
    @minCols: 4; 
    @minGutter: 12px; 
    @max-width: 760px
 )  {
    .setMedia(@cols; @gutter) {
        div {
            width: (100% / @cols);
        }
        .block-group { margin: -@gutter 0 0 -@gutter; }
        .block { padding: @gutter 0 0 @gutter; }
    }

    @media screen and (max-width: @max-width) { 
        .setMedia(@maxCols; @maxGutter);
    }

    @media screen and (min-width: (1 + @max-width)) { 
        .setMedia(@minCols; @minGutter);
    }

  &:extend(.block-group);

  div {
    &:extend(.block);
  }
}

.wrapper_1 {
  .setGrid();
}

.wrapper_2 {
  .setGrid(4; 12px; 8; 16px);
}

---

如果在

.wrapper

的上下文中调用mixin，则不会有任何

.block

和

.block group

选择器，但是

.wrapper.block

和

.wrapper.block group

和

:extend

将不匹配任何内容。您可以将选择器作为参数传递给mixin，但是

extend

也将不匹配插值变量。此外，还需要匹配顶级

.block

和

.block group

，这样即使它匹配了变量，它也不会工作

您可以按照建议调用mixin，如果希望将样式应用于嵌套在选择器中的div，则可以在变量中传递选择器的名称。所以你可以有这个：

@media screen and (max-width: 760px) {
  .make(2; 8px; wrapper);
}
@media screen and (min-width: 761px) {
  .make(4; 12px; wrapper);
}

这与您建议的一样，但将选择器名称作为参数传递。由于mixin是在顶级调用的，

.block

选择器也将是顶级的，并且只有div选择器将放置在

.wrapper

上下文下：

.make(@columns; @gutter; @selector) {
  .@{selector} {
    &:extend(.block-group);
    div:extend(.block) {
      width: (100% / @columns);
    }
  }
  .block-group { margin: -@gutter 0 0 -@gutter; }
  .block { padding: @gutter 0 0 @gutter; }
}

上面的mixin有一个问题。由于您将在媒体查询中调用它，

extend

的范围也将限于媒体查询。如果您不需要扩展任何全局选择器，那么这没关系，但在您的情况下，您需要扩展。只要在选择器中使用

extend

伪元素，而不是在mixin中，您仍然可以在媒体查询中使用mixin：

.wrapper:extend(.block-group) {
  background-color: red;
  div:extend(.block) {
    background-color: green;
    img {
      display: block;
    ...

.make(@columns; @gutter; @selector) {
  .@{selector} {
    div {
      width: (100% / @columns);
    }
  }
  .block-group { margin: -@gutter 0 0 -@gutter; }
  .block { padding: @gutter 0 0 @gutter; }
}

并将其从混合器中取出：

.wrapper:extend(.block-group) {
  background-color: red;
  div:extend(.block) {
    background-color: green;
    img {
      display: block;
    ...

.make(@columns; @gutter; @selector) {
  .@{selector} {
    div {
      width: (100% / @columns);
    }
  }
  .block-group { margin: -@gutter 0 0 -@gutter; }
  .block { padding: @gutter 0 0 @gutter; }
}

---

请参见

您想在mixin中获得什么？你有什么问题，因为扩展？我将媒体查询放在您提供的空mixin中：您还希望它做什么？我只是更新我的问题，以便更好地解释我试图做什么。。。我想要一种更直接的方法将网格应用于元素。这可能吗？我在你的示例中添加了一个新的包装器，中间有一个div。。。奇怪的事情发生了：第二个包装有一个顶部填充，中间的div与绿色区域重叠。知道为什么吗？这里是链接：这是一个填充。我不确定你期望的结果是什么，但填充/边距的顺序是从右上到左下。排水沟位于顶部和左侧。这就是你想要的吗？最上面的一个不可见，可能是因为它的负边距隐藏了它，但是如果在第一个包装器之前放置一些div，您将看到它。可能您想要的是：

0-@gotter 0-@gotter

PocketGrid的默认行为是使用左上角的负边距来管理排水沟，允许在没有外部边距的情况下使用整页网格。您可以在文档中找到解释：您不应该在块上设置背景。