开发一个自己的 CSS 框架（五）

这一期我们继续完成我们的网格布局

容器类

通过一个 # 占位符，来减少代码输出量。

#container
  padding-right: 15px
  padding-left: 15px
  margin-right: auto
  margin-left: auto

.container
  width: 100%
  @extend #container
  @media screen and (min-width: $media-size-1)
    max-width: $media-size-box-1
  @media screen and (min-width: $media-size-2)
    max-width: $media-size-box-2
  @media screen and (min-width: $media-size-3)
    max-width: $media-size-box-3
  @media screen and (min-width: $media-size-4)
    max-width: $media-size-box-4
  &-fluid
    width: 100%
    @extend #container

基于浮动的网格布局

jeet 里面的函数参数挺多的，我们只用一个即可，封装的太高了，不太好契合。percentage 可以用来得到百分比。

.fa-gird
  +clearfix
  @for $i from 1 through 12
    .is-#{$i}
      +column($i/12)
      @for $j from 1 through 12
        &.offset-#{$j}
          margin-left: percentage($j / 12)
  &.span
    @for $i from 1 through 12
      .is-#{$i}
        +span($i/12)

基于 flex 的网格布局

row 代表单行结构。下面的一些键盘组合代表的方位，比如 jk ，先按 j 再按 k，代表着从左往右，而 kj 则从右往左，jn 和 nj 类似。

而主轴对齐方式用到了 tyuio 几个字母，u 在中间所以代表居中，t 左边，o 右边，tuo 代表元素之间有间隔，yui 代表开始结束的也有间隔。副轴的我就没有继续添加了。

.fl-gird
  display: flex
  flex-wrap: wrap
  &.row
    flex-wrap: no-wrap
  &.kj
    flex-direction: row-reverse
  &.jn
    flex-direction: column
  &.nj
    flex-direction: column-reverse
  &.u
    justify-content: center
  &.t
    justify-content: flex-start
  &.o
    justify-content: flex-right
  &.tuo
    justify-content: space-between
  &.yui
    justify-content: space-around
  @for $i from 1 through 12
    .is-#{$i}
      width: percentage($i / 12)
      @for $j from 1 through 12
        &.offset-#{$j}
          margin-left: percentage($j / 12)

响应式

添加响应式功能

// 响应式
@for $i from 1 through 12
  .fa-gird .is-media1-#{$i},
  .fl-gird .is-media1-#{$i}
    +media1
      width: percentage($i / 12)

  .fa-gird .is-media2-#{$i},
  .fl-gird .is-media2-#{$i}
    +media2
      width: percentage($i / 12)

  .fa-gird .is-media3-#{$i},
  .fl-gird .is-media3-#{$i}
    +media3
      width: percentage($i / 12)

  .fa-gird .is-media4-#{$i},
  .fl-gird .is-media4-#{$i}
    +media4
      width: percentage($i / 12)