整理前端開發常用的 SCSS 程式碼，包含響應式版面斷點、元素置中、淡入淡出與樣式變數。透過可重複使用的 mixin 和參數，把經常出現的樣式需求集中管理，方便在日常切版工作中查閱與調整。
索引
mixin
RWD
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
| @mixin desktop {
@media(max-width: 1440px) {
@content
}
}
@mixin tablet {
@media(max-width: 768px) {
@content
}
}
@mixin phone {
@media(max-width: 540px) {
@content
}
}
// 自訂寬度
@mixin custom($width) {
@media(max-width: $width + 'px') {
@content
}
}
// 填入數字即可產生相應寬度的@media
// 正數為max-width、負數為min-width
// $w: int
@mixin media($w) {
@if ($w < 0) {
@media (min-width: (-$w + px)) {
@content;
}
} @else {
@media (max-width: ($w + px)) {
@content;
}
}
}
|
置中
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
|
@mixin center($type: flex, $axis: all) {
@if ($type == flex) {
display: flex;
@if ($axis == x or $axis == all) {
justify-content: center;
}
@if ($axis == y or $axis == all) {
align-items: center;
}
}
@if ($type == transform) {
position: absolute;
@if ($axis == x) {
right: auto;
left: 50%;
transform: translateX(-50%);
@content;
}
@if ($axis == y) {
bottom: auto;
top: 50%;
transform: translateY(-50%);
@content;
}
@if ($axis == all) {
top: 50%;
bottom: auto;
left: 50%;
right: auto;
transform: translate(-50%, -50%);
@content;
}
}
@if ($type == margin) {
margin: 0 auto;
}
}
|
淡入淡出
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
|
@mixin fade($switch: out, $axis: x, $offset: 10, $name: fade) {
@keyframes #{$name} {
from {
@if ($switch == out) {
opacity: 1;
} @else {
opacity: 0;
}
@if ($axis == x) {
transform: translateX(0);
} @else {
transform: translateX($offset);
}
}
to {
@if ($switch == out) {
opacity: 0;
} @else {
opacity: 1;
}
@if ($axis == x) {
transform: translateX($offset);
} @else {
transform: translateX(0);
}
}
}
}
|
變數
樣式變數
1
2
3
4
5
6
|
$primary: #449966 !default;
$secondary: #F8EBCF !default;
$tertiary: #F0E0B9 !default;
$transition-1: all .2s ease-out;
|
