Stylus - 实现栅格化

十二月 20, 2019 999

使用CSS预处理工具Stylus实现类似BootStrap中的栅格化功能。

最近在开发一个博客主题，需要实现栅格化。

首先想到的就是BootStrap，二话不说引了进来，等等……

我的初衷是倾尽全力设计一个简洁的博客主题，代码也必须简洁，所以就仿照BootStrap，用Stylus实现了栅格化功能。

几行代码，取代了长篇大论的BootStrap。

食用方法同BootStrap。

// Grid
.row
  display -ms-flexbox
  display flex
  -ms-flex-wrap wrap
  flex-wrap wrap
for $i in 1 .. 12
  .col-{$i}, .col-md-{$i}, .col-lg-{$i}
    position relative
    width 100%
    padding-right 15px
    padding-left 15px
    @media (max-width: 576px)
      padding-right 0
      padding-left 0
col-attr()
  -ms-flex 0 0 arguments
  flex 0 0 arguments
  max-width arguments
for $i in 1 .. 12
  .col-{$i}
    col-attr round(($i * 100 / 12) %, 6)
@media (min-width: 576px)
  for $i in 1 .. 12
    .col-sm-{$i}
      col-attr round(($i * 100 / 12) %, 6)
@media (min-width: 768px)
  for $i in 1 .. 12
    .col-md-{$i}
      col-attr round(($i * 100 / 12) %, 6)
@media (min-width: 992px)
  for $i in 1 .. 12
    .col-lg-{$i}
      col-attr round(($i * 100 / 12) %, 6)
查看评论