如何制作一个基于 sass 的网格系统，从小到大的列

Question

我似乎无法在 Google 上找到我要找的东西。我正在尝试设置一个响应式网格系统，该系统使用像 foundation 或 bootstrap 这样的列。基本上我想取消 column column-med column-lg 但我不明白 column-med 在更改断点时应该如何覆盖 column-lg 。我知道它必须以某种方式成为断点，但我想使用 sass 映射来执行此操作并且没有大量的媒体查询。有人可以在这里为我指明正确的方向吗？

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%;
}

因此，这将为任何大小 window 生成两列，其中 class 'col' 和 'col-6'。此外，如果您不需要排水沟，则不必使用 'col' class。

然后 class 使用媒体查询。

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

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

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

如何制作一个基于 sass 的网格系统，从小到大的列

How to make a sass based grid system with small through large columns

css

sass

zurb-foundation

bootstrap-4