Question

我似乎无法在Google上找到想要的东西。我正在尝试建立一个使用诸如Foundation或Bootstrap之类的列的响应式网格系统。基本上，我想退出column column-med column-lg，但我不了解column-med在更改断点时应如何覆盖column-lg。我知道它一定是一个断点，但是我想使用一个Sass Map来做到这一点，并且没有大量的媒体查询。有人可以在这里向我指出正确的方向吗？

Answer 1

首先，您需要为媒体查询创建一个mixin。像这样：

@mixin small {
    @media screen and (min-width: 768px) {
        @content;
    }
}
@mixin medium {
    @media screen and (min-width: 1024px) {
        @content;
    }
}

对您想要的任何尺寸进行相同的操作。为了在.scss文件中调用该mixin，您需要执行以下操作。

@include small {
  //Your css rules here
}

@include small {
  //Your css rules here
}

要创建网格，您想使用flexbox来创建列。首先从您的默认列开始。

.col {
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  padding-left: 10px;
  padding-left: 10px;
  box-sizing: border-box; //so that the padding is included in the size
}

.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

因此，对于任何大小的窗口，该类将分为两列，分别为类'col'和'col-6'。另外，如果您不想装订线，则不必使用'col'类。

然后使用媒体查询创建类。

@include small {
  .col-sm-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
}

@include medium {
  .col-md-4 {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
  }
}

就是这样。只需添加类'col'和'col-sm-6'和'col-md-4'，您将获得一列，宽度为0-767像素，两列为768至1023，三列为1024 +。

如何制作从小到大的基于Sass的网格系统

1 个答案: