css - 如何通过大列制作一个基于 sass 的网格系统

Question

我似乎无法在 Google 上找到我要找的东西。我正在尝试建立一个响应式网格系统，该系统使用诸如基础或 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%;
}

因此这将为任何大小的窗口创建两列，类别为“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+。