SCSS 循环和常规用命令

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
131
// 属性基础 ********************************************************************************
$rem-unit: 0.25rem;
// 内外边距
$positions: (
  "p": "padding",
  "m": "margin",
);
// 方向
$around: (
    "t": "top",
    "r": "right",
    "b": "bottom",
    "l": "left",
);
// 差异等级
$levels: (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, );
// 占比划分
$divides: (
    "1_2" : 50%,
    "1_3" : 33.333%,
    "2_3" : 66.666%,
    "1_4": 25%,
    "3_4": 75%,
    "1_5": 10%,
    "2_5": 20%,
    "3_5": 60%,
    "4_5": 80%,
);
// flex ********************************************************************************
.hidden {
    display: none
}
.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-1 {
    flex: 1 1 0%;
}

@each $k, $v in ("start": "flex-start", "center": "center", "end": "flex-end", "between": "space-between", "around": "space-around" ) {
    .justify-#{$k} {
        justify-content: #{$v}
    }
}

@each $k, $v in ("stretch": "stretch", "start": "flex-start", "center": "center", "end": "flex-end", "baseline": "baseline" ) {
    .items-#{$k} {
        align-items: #{$v}
    }
}

// 边距基础 ********************************************************************************

@each $p_key, $p_value in $positions {
    @each $level in $levels { 
        .#{$p_key}-#{$level} { 
            #{$p_value}: #{$rem-unit * $level};
        } 
        .#{$p_key}x-#{$level} { 
            #{$p_value}: #{$rem-unit * $level} 0;
        } 
        .#{$p_key}y-#{$level} { 
            #{$p_value}: 0 #{$rem-unit * $level};
        } 
        @each $a_key, $a_value in $around {
            .#{$p_key}#{$a_key}-#{$level} { 
                #{$p_value}-#{$a_value}: #{$rem-unit * $level};
            } 
        }
    }
}

// 滚动 ********************************************************************************

@each $overflow in (auto, hidden, visible, scroll) {
    .overflow-#{$overflow} {
        overflow: #{$overflow};
    }
    .overflow-x-#{$overflow} {
        overflow-x: #{$overflow};
    }
    .overflow-y-#{$overflow} {
        overflow-y: #{$overflow};
    }
}

// 宽高 ********************************************************************************
// 占比类
@each $dk, $dv in $divides {
    .w-#{$dk} {
        width: #{$dv};
    }
}
// 固定宽高
@each $level in $levels { 
    .h-#{$level} { 
        width: #{$rem-unit * $level};
    }
    .w-#{$level} { 
        width: #{$rem-unit * $level};
    } 
}
// 占满
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}

.full {
    width: 100%;
    height: 100%;
}

// 浮动 ********************************************************************************

@each $float in (right, left, none) { 
    .float-#{$float} { 
        float: $float;
    }
}