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

时间:2018-06-28 18:56:30

标签: css sass bootstrap-4 zurb-foundation

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

1 个答案:

答案 0 :(得分: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 +。