Skip to content

Commit 696c331

Browse files
author
anthinkingcoder
committed
优化名称
1 parent a971b13 commit 696c331

File tree

1 file changed

+112
-113
lines changed

1 file changed

+112
-113
lines changed

‎src/styles/grid.scss

Lines changed: 112 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,112 @@
1-
$prefix: '.simple';
2-
$rowPrefix: '#{$prefix}-row';
3-
$colPrefix: '#{$prefix}-col';
4-
$flexRowPrefix: '#{$rowPrefix}-flex';
5-
$gridCol: 24;
6-
$justifies: ('start','end','center','space-around','space-between');
7-
$aligns: ('top':'flex-start','middle':'center','bottom':'flex-end');
8-
9-
10-
@mixin generate-row {
11-
12-
#{$rowPrefix} {
13-
display: block;
14-
position: relative;
15-
margin: 0;
16-
height: auto;
17-
zoom: 1;
18-
overflow: hidden;
19-
}
20-
21-
#{$flexRowPrefix} {
22-
display: flex;
23-
flex-direction: row;
24-
flex-wrap: wrap;
25-
}
26-
27-
#{$colPrefix} {
28-
display: block;
29-
position: relative;
30-
}
31-
#{$flexRowPrefix},#{$flexRowPrefix},#{$colPrefix} {
32-
box-sizing: border-box;
33-
}
34-
@each $justify in $justifies {
35-
#{$flexRowPrefix}-#{$justify} {
36-
justify-content: #{$justify};
37-
}
38-
}
39-
40-
@each $key,$value in $aligns {
41-
#{$flexRowPrefix}-#{$key} {
42-
align-items: #{$value};
43-
}
44-
}
45-
}
46-
47-
@mixin generate-float-col($viewport:'') {
48-
$cols: '#{$colPrefix}-span#{$viewport}-1';
49-
@for $i from 2 through $gridCol {
50-
$cols: '#{$cols},#{$colPrefix}-span#{$viewport}-#{$i},';
51-
}
52-
#{$cols} {
53-
float: left;
54-
flex: 0 0 auto;
55-
}
56-
}
57-
58-
@mixin generate-col($viewport: '') {
59-
@for $i from 1 through $gridCol {
60-
#{$colPrefix}-span#{$viewport}-#{$i} {
61-
width: percentage($i / $gridCol);
62-
}
63-
64-
#{$colPrefix}-push#{$viewport}-#{$i} {
65-
left: percentage($i / $gridCol);
66-
}
67-
68-
#{$colPrefix}-pull#{$viewport}-#{$i} {
69-
right: percentage($i / $gridCol);
70-
}
71-
72-
#{$colPrefix}-offset#{$viewport}-#{$i} {
73-
margin-left: percentage($i / $gridCol);
74-
}
75-
}
76-
}
77-
78-
@mixin generate-grid($viewport) {
79-
@include generate-float-col($viewport);
80-
@include generate-col($viewport);
81-
}
82-
83-
84-
85-
86-
87-
@include generate-row();
88-
@include generate-grid('');
89-
90-
@media (max-width: 768px) {
91-
@include generate-grid('-xs');
92-
}
93-
94-
@media (min-width: 768px) {
95-
@include generate-grid('-sm');
96-
}
97-
98-
@media (min-width: 992px) {
99-
@include generate-grid('-md');
100-
}
101-
102-
@media (min-width: 1200px) {
103-
@include generate-grid('-lg');
104-
}
105-
106-
107-
108-
109-
110-
111-
112-
113-
1+
$prefix: '.simple';
2+
$rowPrefix: '#{$prefix}-row';
3+
$colPrefix: '#{$prefix}-col';
4+
$flexRowPrefix: '#{$rowPrefix}-flex';
5+
$flexJustifies: ('start','end','center','space-around','space-between');
6+
$flexAligns: ('top':'flex-start','middle':'center','bottom':'flex-end');
7+
$gridCol: 24;
8+
9+
@mixin generate-row {
10+
11+
#{$rowPrefix} {
12+
display: block;
13+
position: relative;
14+
margin: 0;
15+
height: auto;
16+
zoom: 1;
17+
overflow: hidden;
18+
}
19+
20+
#{$flexRowPrefix} {
21+
display: flex;
22+
flex-direction: row;
23+
flex-wrap: wrap;
24+
}
25+
26+
#{$colPrefix} {
27+
display: block;
28+
position: relative;
29+
}
30+
#{$flexRowPrefix},#{$flexRowPrefix},#{$colPrefix} {
31+
box-sizing: border-box;
32+
}
33+
@each $justify in $flexJustifies {
34+
#{$flexRowPrefix}-#{$justify} {
35+
justify-content: #{$justify};
36+
}
37+
}
38+
39+
@each $key,$value in $flexAligns {
40+
#{$flexRowPrefix}-#{$key} {
41+
align-items: #{$value};
42+
}
43+
}
44+
}
45+
46+
@mixin generate-float-col($viewport:'') {
47+
$cols: '#{$colPrefix}-span#{$viewport}-1';
48+
@for $i from 2 through $gridCol {
49+
$cols: '#{$cols},#{$colPrefix}-span#{$viewport}-#{$i},';
50+
}
51+
#{$cols} {
52+
float: left;
53+
flex: 0 0 auto;
54+
}
55+
}
56+
57+
@mixin generate-col($viewport: '') {
58+
@for $i from 1 through $gridCol {
59+
#{$colPrefix}-span#{$viewport}-#{$i} {
60+
width: percentage($i / $gridCol);
61+
}
62+
63+
#{$colPrefix}-push#{$viewport}-#{$i} {
64+
left: percentage($i / $gridCol);
65+
}
66+
67+
#{$colPrefix}-pull#{$viewport}-#{$i} {
68+
right: percentage($i / $gridCol);
69+
}
70+
71+
#{$colPrefix}-offset#{$viewport}-#{$i} {
72+
margin-left: percentage($i / $gridCol);
73+
}
74+
}
75+
}
76+
77+
@mixin generate-grid($viewport) {
78+
@include generate-float-col($viewport);
79+
@include generate-col($viewport);
80+
}
81+
82+
83+
84+
85+
86+
@include generate-row();
87+
@include generate-grid('');
88+
89+
@media (max-width: 768px) {
90+
@include generate-grid('-xs');
91+
}
92+
93+
@media (min-width: 768px) {
94+
@include generate-grid('-sm');
95+
}
96+
97+
@media (min-width: 992px) {
98+
@include generate-grid('-md');
99+
}
100+
101+
@media (min-width: 1200px) {
102+
@include generate-grid('-lg');
103+
}
104+
105+
106+
107+
108+
109+
110+
111+
112+

0 commit comments

Comments
 (0)