前端常用scss整理

索引

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
// $type(option): flex, transform, margin
// $axis(option): x, y, all
@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
// $switch(option): in, out
// $axis(option): x, y
// $offset(option) int
// $name(option) custom name
@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;