flex.scss
2.83 KB
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// 快捷margin和padding
// 方向列表
$directions: top, right, bottom, left;
// 数值范围（从1到100）
@for $i from 0 through 100 {
@each $direction in $directions {
// 生成 margin 类
.margin-#{$direction}-#{$i} {
margin-#{$direction}: #{$i}px;
}
// 生成 padding 类
.padding-#{$direction}-#{$i} {
padding-#{$direction}: #{$i}px;
}
}
// 生成所有方向的 margin 类
.margin-#{$i} {
margin: #{$i}px;
}
// 生成所有方向的 padding 类
.padding-#{$i} {
padding: #{$i}px;
}
}
// 使用Sass的循环生成动态的CSS类
@for $i from 1 through 100 {
.w#{$i} {
width: $i * 1%; // 使用 $i 乘以 1% 来设置宽度
}
}
@for $i from 1 through 100 {
.h#{$i} {
height: $i * 1%; // 使用 $i 乘以 1% 来设置高度
}
}
@for $i from 1 through 100 {
.fs#{$i} {
font-size: #{$i}px;
}
}
// 主轴方向 属性值
$directionList: row, row-reverse, column, column-reverse;
// 主轴对齐方式 属性值
$justifyContentList: flex-start, flex-end, center, space-between, space-around;
// 交叉轴对齐方式 属性值
$alignItemsList: flex-start, flex-end, center, baseline, stretch;
// 三层遍历，组合所有属性值
@each $direction in $directionList {
// 简化一些属性值
$dir: $direction;
@if $direction =='row' {
$dir: 'x';
}
@if $direction =='column' {
$dir: 'y';
}
@each $justifyContent in $justifyContentList {
// 简化一些属性值
$JC: $justifyContent;
@if $justifyContent =='flex-start' {
$JC: 'start';
}
@if $justifyContent =='flex-end' {
$JC: 'end';
}
@if $justifyContent =='space-between' {
$JC: 'between';
}
@if $justifyContent =='space-around' {
$JC: 'around';
}
@each $alignItems in $alignItemsList {
// 简化一些属性值
$AI: $alignItems;
@if $alignItems =='flex-start' {
$AI: 'start';
}
@if $alignItems =='flex-end' {
$AI: 'end';
}
// 根据变量，组合为css代码
@if $AI =='center' {
.flex-#{$dir}-#{$JC} {
display: flex;
flex-direction: $direction;
justify-content: $justifyContent;
align-items: center;
}
}
@else {
.flex-#{$dir}-#{$JC}-#{$AI} {
display: flex;
flex-direction: $direction;
justify-content: $justifyContent;
align-items: $alignItems;
}
}
}
}
}