使用CSS预处理工具Stylus实现类似BootStrap中的栅格化功能。
最近在开发一个博客主题，需要实现栅格化。
首先想到的就是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
|
.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)
|
