前端常用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;