Stylus - 实现栅格化

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

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

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

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

食用方法同BootStrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 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)
查看评论