Sass - SCSS 語法初學
在上一篇【在 VISUAL STUDIO 撰寫 SASS(SCSS) 讓您快樂似神仙】中,我們完成了在 Visual Studio 裡開發 SCSS 的設定,這一篇主要是參考【Sass Reference】網站內容與【Sass & Compass: The future of stylesheets now.】簡報內容裡的程式碼做一些註解,未來查詢時方便自我取用。
SCSS 語法:Nesting Rules, 巢狀規則
就那麼簡單: {} 一層,{{}} 兩層,以此類推。在 SCSS 語法裡巢狀規則也很簡單,你就看包幾層的 {} 符號,那就是幾層。
巢狀規則 SCSS 範例
01 | /* 巢狀規則1 */ |
02 | /* article 與 border-top 一條規則 */ |
03 | /* article 與 header 一條規則 */ |
04 | article { |
05 | border-top : 1px dashed #eee ; |
06 | header { margin-bottom : 1.5em ; } |
07 | } |
08 |
09 | /* 巢狀規則2 */ |
10 | /* article 與 header 一條規則 */ |
11 | /* article 與 section 一條規則 */ |
12 | article { |
13 | header, section { margin-bottom : 1.5em ; } |
14 | } |
15 |
16 | /* 巢狀規則3 */ |
17 | /* article 與 >, ~, +, * 各一條規則(共 4 條規則) */ |
18 | article { |
19 | > h 2 { border-top : 1px dashed #eee ; } |
20 | ~ article { padding-top : 1.5em ; } |
21 | + footer { margin-top : 0 ; } |
22 | * { color : #000 ; } |
23 | } |
24 |
25 | /* 巢狀規則4 */ |
26 | /* Parent Selector - & 參考父選擇器 */ |
27 | /* a 一條規則 */ |
28 | /* &:hover 一條規則 */ |
29 | a { |
30 | color : blue ; |
31 | &:hover { color : red ; } |
32 | display : inline- block ; |
33 | line-height : 1.8em ; |
34 | } |
35 |
36 | /* 巢狀規則5 */ |
37 | /* Parent Selector - & 新增內容至選擇器 */ |
38 | /* article 與 h1 一條規則 */ |
39 | /* .blog-index & 參考(&)父選擇器形成 |
40 | ".blog-index article",.blog-index article 與 h1 一條規則 |
41 | */ |
42 | article { |
43 | h 1 { font-size : 2.4em ; } |
44 | .blog-index & { |
45 | h 1 { font-size : 2em ; } |
46 | } |
47 | } |
48 |
49 | /* 巢狀規則6 */ |
50 | /* Parent Selector - & 與 Modernizr 一起運作 */ |
51 | /* button 與 backgroud 一條規則 */ |
52 | /* .no-cssgradients & 參考(&)父選擇器形成 |
53 | ".no-cssgradients button" 一條規則 |
54 | |
55 | */ |
56 | button { |
57 | background : linear-gradient( #444 , #222 ); |
58 | .no-cssgradients & { background : #333 ; } |
59 | } |
巢狀規則 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | /* 巢狀規則1 */ |
03 | article { |
04 | border-top : 1px dashed #eee ; } |
05 | article header { |
06 | margin-bottom : 1.5em ; } |
07 |
08 | /* 巢狀規則2 */ |
09 | article header, article section { |
10 | margin-bottom : 1.5em ; } |
11 |
12 | /* 巢狀規則3 */ |
13 | article > h 2 { |
14 | border-top : 1px dashed #eee ; } |
15 | article ~ article { |
16 | padding-top : 1.5em ; } |
17 | article + footer { |
18 | margin-top : 0 ; } |
19 | article * { |
20 | color : #000 ; } |
21 |
22 | /* 巢狀規則4 */ |
23 | a { |
24 | color : blue ; |
25 | display : inline- block ; |
26 | line-height : 1.8em ; } |
27 | a:hover { |
28 | color : red ; } |
29 |
30 | /* 巢狀規則5 */ |
31 | article h 1 { |
32 | font-size : 2.4em ; } |
33 | .blog-index article h 1 { |
34 | font-size : 2em ; } |
35 |
36 | /* 巢狀規則6 */ |
37 | button { |
38 | background : linear-gradient( #444444 , #222222 ); } |
39 | .no-cssgradients button { |
40 | background : #333 ; } |
父選擇器碰到子選擇器,就形成一條規則。碰到 &(參考) 就形成一條規則。例如以下 SCSS,
1 | a { |
2 | color : red ; |
3 | b { |
4 | color : greed; |
5 | c { |
6 | color : blue ; |
7 | } |
8 | } |
9 | } |
產生的 CSS,
1 | a { |
2 | color : red ; } |
3 | a b { |
4 | color : greed; } |
5 | a b c { |
6 | color : blue ; } |
a、ab、abc 一共三條,這樣清楚了嗎。
SCSS 語法: Media Bubbling, 媒體查詢
@media 是 CSS3 的功能,SCSS 語法裡媒體查詢語法會自動包含父選擇器,有點像泡泡會上升去包著一樣。
媒體查詢 SCSS 範例
/* 媒體查詢 */ /* 媒體查詢會像氣泡般包含內容(#content) */ #content { margin: 0 1.5em; @media screen and (min-width: 1280px) { margin: 0 2.5em; } }
以上有巢狀關係,會產生二條規則,第二條規則使用媒體查詢語法,會自動包含父選擇器。
媒體查詢 SCSS 轉成 CSS
1 | @charset "UTF-8" ; |
2 | /* 媒體查詢 */ |
3 | /* 媒體查詢會像氣泡般包含內容(#content) */ |
4 | #content { |
5 | margin : 0 1.5em ; } |
6 | @media screen and ( min-width : 1280px ) { |
7 | #content { |
8 | margin : 0 2.5em ; } } |
媒體查詢把父選擇器(#content)包進來形成規則。
SCSS 語法:Variables, 變數
就那麼簡單: $變數:值;,$ 符號宣告一個變數,接下來如 CSS 一樣透過 : 符號設定值。
變數 SCSS 範例
01 | /* 就那麼簡單: $變數:值; */ |
02 | /* 可使用在: |
03 | 顏色(Colors), 數字(Numbers), 文字(text) |
04 | 了解單位上 |
05 | */ |
06 |
07 | /* 變數1 */ |
08 | $link- color : blue ; |
09 | $link-hover: red ; |
10 |
11 | a { |
12 | color : $link-color; |
13 | &:hover { color : $link-hover; } |
14 | } |
15 |
16 | /* 變數2 */ |
17 | /* 負數要用刮弧包起來,例如,(-變數) */ |
18 | $msg-pad: 24px ; |
19 | .msg { |
20 | padding : $msg-pad; |
21 | h 3 { |
22 | padding : $msg-pad; |
23 | margin : (-$msg-pad) (-$msg-pad) 0 ; |
24 | } |
25 | } |
在 a {} 樣式規則裡有個 &,那個 & 會去參考父選擇器,&:hover 的父選擇器是 a,所以下面的 css 出來的就是 a:hover {},有沒有很方便。
變數 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | /* 變數1 */ |
03 | a { |
04 | color : blue ; } |
05 | a:hover { |
06 | color : red ; } |
07 |
08 | /* 變數2 */ |
09 | .msg { |
10 | padding : 24px ; } |
11 | .msg h 3 { |
12 | padding : 24px ; |
13 | margin : -24px -24px 0 ; } |
SCSS 語法: @extend, 延伸
@extend 延伸像我們頁面的主版頁面裡會使用的使用者控制項(Webform)或Partial方法(MVC),把一個一個子版先切好,然後在需要的地方放入使用。像 Login 頁面,因為每一頁都會用到,我們就切出來一個子頁,讓每一頁去引用,當我們修改更新任何 Login 頁面,所以頁面就會立即使用最新的 Login 頁面一樣道理。
延伸 SCSS 範例
01 | /* 定義.button */ |
02 | /* 這裡被拿去做延伸使用,所以在 CSS 不會出現 */ |
03 | .button { |
04 | background : blue ; |
05 | color : white ; |
06 | padding : 0.2em 0.8em ; |
07 | border-radius: 0.4em ; |
08 | } |
09 |
10 | /* .button-delete 與 @extend .button 形成一條規則 */ |
11 | /* .button-delete 形成一條規則 */ |
12 | .button-delete { |
13 | @extend .button; // .button .button-delete {} |
14 | background : red ; |
15 | } |
用白話來說:.button-delete 要延伸自 .button 的規則,所以注意產生的 CSS 規則會是 .button .button-delete {}。
延伸 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | .button, .button-delete { |
03 | background : blue ; |
04 | color : white ; |
05 | padding : 0.2em 0.8em ; |
06 | border-radius: 0.4em ; } |
07 |
08 | /* .button-delete 與 @extend .button 形成一條規則 */ |
09 | /* .button-delete 形成一條規則 */ |
10 | .button-delete { |
11 | background : red ; } |
SCSS 語法: Mixins, 混合使用
@mixin 把可重覆使用的規則提煉出來,而且還可以與變數、&(參考)…一起使用,大大增加彈性。在要引用的樣式規則裡使用 @include 引用定義的好的規則即可。
混合使用 SCSS 範例
01 | /* 把可重覆使用的規則提煉出來 */ |
02 |
03 | /* 混合1 */ |
04 | @mixin hover-link { |
05 | text-decoration : none ; |
06 | &:hover { text-decoration : underline ; } |
07 | } |
08 |
09 | /* 使用 hover-link 規則 */ |
10 | nav a { @include hover-link; } |
11 |
12 | /* 混合2 - 與變數一併使用 */ |
13 | @mixin border-radius($amount) { |
14 | border-radius: $amount; |
15 | -webkit-border-radius: $amount; |
16 | -moz-border-radius: $amount; |
17 | } |
18 |
19 | /* 傳入變數 */ |
20 | .msg { @include border-radius( 5px ); } |
21 |
22 | /* 混合3 - 預設與名稱參數 */ |
23 | /* $text:blue 給$text變數預設值,如果未傳入變數值,即使用預設值 */ |
24 | @mixin link-color ($text: blue , $hover: red ){ |
25 | color : $text; |
26 | &:hover { color : $hover;} |
27 | } |
28 |
29 | /* $text 使用預設值, $hover 使用 green */ |
30 | a { @include link-color($hover: green ); } |
混合使用 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | /* 混合1 */ |
03 | /* 使用 hover-link 規則 */ |
04 | nav a { |
05 | text-decoration : none ; } |
06 | nav a:hover { |
07 | text-decoration : underline ; } |
08 |
09 | /* 混合2 - 與變數一併使用 */ |
10 | /* 傳入變數 */ |
11 | .msg { |
12 | border-radius: 5px ; |
13 | -webkit-border-radius: 5px ; |
14 | -moz-border-radius: 5px ; } |
15 |
16 | /* 混合3 - 預設與名稱參數 */ |
17 | a { |
18 | color : blue ; } |
19 | a:hover { |
20 | color : green ; } |
SCSS 語法: Importing, 匯入
在 SCSS 裡的匯入與 CSS 的匯入有些不同,在 CSS 裡假設我們在 main.css 匯入了三個 *.css 檔案,總共瀏覽器會發出 4 條 request,main.css + 裡面三個 import *.css = 4 request,這樣才會完成整個 CSS 下載的動作。在 SCSS 裡,它是會匯整成一個檔案來產出,例如,我在 main.scss 裡匯入三個 *.scss 檔案,那它會產出一個 main.css 檔案,面裡包含了那三個 *.scss 檔案的內容。當我更新那三個 *.scss 任何內容,就會重新產生 main.css。
匯入 SCSS 範例
01 | /* 使用 import 請對應至"_檔名.scss",然後 import "檔名" */ |
02 |
03 | /* 對應 _core.scss */ |
04 | @import "core" ; |
05 | /* 對應 _typography.scss, _grid.scss */ |
06 | @import "typography" , "grid" ; |
07 |
08 | /* 你也能在巢狀裡使用 import */ |
09 | @media screen and ( min-width : 320px ) { |
10 | @import "core" ; |
11 | } |
12 |
13 | /* 這裡用巢狀 a, ab, ac 共三條規則 */ |
14 | #acc ount { |
15 | @import "typography" , "grid" ; |
16 | } |
注意,你要讓 SCSS 匯入的檔名必須在開頭加底線(_檔名.scss)。
匯入 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | /* import 測試用 _core.scss */ |
03 | body { |
04 | color : red ; } |
05 |
06 | /* import 測試用 _typography.scss */ |
07 | body { |
08 | color : blue ; } |
09 |
10 | /* import 測試用 _grid.scss */ |
11 | body { |
12 | color : greed; } |
13 |
14 | /* 你也能在巢狀裡使用 import */ |
15 | @media screen and ( min-width : 320px ) { |
16 | /* import 測試用 _core.scss */ |
17 | body { |
18 | color : red ; } } |
19 | /* 這裡用巢狀 a, ab, ac 共三條規則 */ |
20 | #acc ount { |
21 | /* import 測試用 _typography.scss */ |
22 | /* import 測試用 _grid.scss */ } |
23 | #acc ount body { |
24 | color : blue ; } |
25 | #acc ount body { |
26 | color : greed; } |
設計初期,可以功能區分、部門區分…來設計相關 SCSS,最後再進行匯入整合即可,而且只產生一整合的檔案,可大大減少 request 數量,比起 CSS 的匯入好太多了。
SCSS 語法: Math, 數學
在 SCSS 語法裡,只要是數字型態(可含單位,例如 1em, 5px)都可以進行【+, -, *, /, %】等運算,讓你透過公式去計算而不是在那裡按計算機老半天。
數學 SCSS 範例
01 | /* Scss 可進行數學操作(+, -, *, /, %) 在數字型態 |
02 | 例如: |
03 | 1em + 1em; // 2em |
04 | 1em - 1em; // 0em |
05 | 1in + 72pt; // 2in |
06 | 6px * 4; // 24px |
07 | 18 % 5; // 3 |
08 | */ |
09 |
10 | /* Math 1 - 除法 */ |
11 | /* |
12 | font: 18px / 1.45em; |
13 | font: (20px / 5); // 4px |
14 | font: 20px / 5 + 1; // 5px |
15 | font: $base / 5; |
16 | $size: 20px / 5; // 4px |
17 | */ |
18 |
19 | /* Math 2 */ |
20 | $container : 960px ; |
21 | $main: 680px ; |
22 | $gutter: 30px ; |
23 |
24 | #sidebar { |
25 | width : $container - $main - $gutter; |
26 | } |
27 |
28 | /* Math 3 - 數學函式 */ |
29 | /* Scss 提供一些好用的函式可使用 */ |
30 | /* |
31 | percentage(13/25) // 52%, 百分比 |
32 | round(2.4) // 2, 取最大整數 |
33 | ceil(2.2) // 3, 無條件進位 |
34 | floor(2.6) // 2, 無條件去位 |
35 | abs(-24) // 24, 絕對值 |
36 | */ |
數學 SCSS 轉成 CSS
1 | #sidebar { |
2 | width : 250px ; } |
SCSS 語法: Loops & Conditions, 迴圈與條件
在 SCSS 裡我們也能包含如【邏輯運算: < > <= >= == !=】、【條件運算:@if, @else, @else if】、【and, or】,也就是說,你可以在樣式規則中使用程式的方法來動態產生你所想要的規則。
迴圈與條件 SCSS 範例
01 | /* 條件包含: |
02 | 邏輯運算: < > <= >= == != |
03 | @if, @else, @else if |
04 | and, or |
05 | */ |
06 |
07 | /* 運算 */ |
08 | /* |
09 | 1 < 20 // true |
10 | 10 <= 20 // true |
11 | 4 > 1 // true |
12 | 4 >= 1 // true |
13 | */ |
14 |
15 | /* |
16 | 1 + 1 == 2 // true |
17 | small != big // true |
18 | #000 == black // true |
19 | */ |
20 |
21 | /* |
22 | red == #f00 |
23 | red == #ff0000 |
24 | red == rgb(255, 0, 0) |
25 | red == rgba(255, 0, 0, 1.0) |
26 | red == hsl(0deg, 100%, 100%) |
27 | reg == hsla(0deg, 100%, 100%, 1) |
28 | */ |
29 |
30 | /* if-else 條件 */ |
31 | $theme: ocean; |
32 | $ color : red ; |
33 |
34 | div { |
35 | @if $theme == dusty { |
36 | background : #c6bba9 ; |
37 | color : $color; |
38 | } @else if $theme == ocean { |
39 | background : blue ; |
40 | color : white ; |
41 | } |
42 | } |
43 |
44 | /* if() 函式 */ |
45 | $main-bg: #000 ; |
46 |
47 | .main{ |
48 | color : if( $main-bg == black , #fff , #000 ); |
49 | } |
50 |
51 | /* @for 迴圈 */ |
52 | @for $ level from 0 to 5 { |
53 | .tag-#{$ level + 1 } { |
54 | font-size : . 7em + ($ level * . 5em ); |
55 | } |
56 | } |
57 |
58 | /* @while 迴圈 */ |
59 | $level 2: 0 ; |
60 | @while $level 2 < 5 { |
61 | .tag-#{$level 2 + 1 } { |
62 | font-size : . 7em + ($level 2 * . 5em ); |
63 | } |
64 | $level 2: $level 2 + 1 ; |
65 | } |
66 |
67 | /* @each 迴圈 */ |
68 | $animals: puma, crab, emu, duck; |
69 | @each $animal in $animals { |
70 | .#{$animal}- icon { |
71 | background : url ( '/images/#{$animal}.png' ); |
72 | } |
73 | } |
程式的【if, if-else, for, while, for each, 二元判斷】都有提供,而且能使用在 CSS 裡,再說一次,SCSS 太棒了。
迴圈與條件 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | /* if-else 條件 */ |
03 | div { |
04 | background : blue ; |
05 | color : white ; } |
06 |
07 | /* if() 函式 */ |
08 | .main { |
09 | color : white ; } |
10 |
11 | /* @for 迴圈 */ |
12 | .tag -1 { |
13 | font-size : 0.7em ; } |
14 |
15 | .tag -2 { |
16 | font-size : 1.2em ; } |
17 |
18 | .tag -3 { |
19 | font-size : 1.7em ; } |
20 |
21 | .tag -4 { |
22 | font-size : 2.2em ; } |
23 |
24 | .tag -5 { |
25 | font-size : 2.7em ; } |
26 |
27 | /* @while 迴圈 */ |
28 | .tag -1 { |
29 | font-size : 0.7em ; } |
30 |
31 | .tag -2 { |
32 | font-size : 1.2em ; } |
33 |
34 | .tag -3 { |
35 | font-size : 1.7em ; } |
36 |
37 | .tag -4 { |
38 | font-size : 2.2em ; } |
39 |
40 | .tag -5 { |
41 | font-size : 2.7em ; } |
42 |
43 | /* @each 迴圈 */ |
44 | .puma- icon { |
45 | background : url ( "/images/puma.png" ); } |
46 |
47 | .crab- icon { |
48 | background : url ( "/images/crab.png" ); } |
49 |
50 | .emu- icon { |
51 | background : url ( "/images/emu.png" ); } |
52 |
53 | .duck- icon { |
54 | background : url ( "/images/duck.png" ); } |
SCSS 語法: Color, 顏色
SCSS 的顏色是提供一大堆顏色運算函式,建議看簡報檔的 page 54 ~ 67 頁,裡面有詳細的圖解。
顏色 SCSS 範例
01 | /* RGBA 函式 */ |
02 | a { color : rgba( blue , . 75 ); } |
03 | p { background : rgba( #ffa , . 25 ); } |
04 |
05 | /* Color 檢查函式 */ |
06 | /* |
07 | $color: red; |
08 |
09 | hue($color); // 0deg, 色度 |
10 | saturation($color); // 100%, 飽合度 |
11 | lightness($color); // 50%, 淡 |
12 |
13 | red($color); // 100 |
14 | green($color); // 0 |
15 | blue($color); // 0 |
16 |
17 | alpha($color); // 100 |
18 | */ |
19 |
20 | $bg: silver ; |
21 | $darkgb: lightness($bg) < lightness( gray ); |
22 | button { |
23 | color : if($darkgb, #fff , #000 ); |
24 | } |
25 |
26 | /* Color 操作 */ |
27 | /* |
28 | invert(blue) // 顛倒, blue --> yellow |
29 | mix(red, yellow) // 混合, red + yellow = orange |
30 | mix(red, yellow, 30%) // red 30% + yellow 70% = orange (亮一些) |
31 | grayscale(yellow) // 灰度 |
32 | complement(#6cf620) // 補足 |
33 | */ |
34 |
35 | /* HSLA 操作 */ |
36 | /* |
37 | adjust-hue(#77a7f9, 90) |
38 | adjust-hue(#77a7f9, -90) |
39 |
40 | saturate(#9b8a60, 50%) // 飽合 |
41 | desaturate(#d9a621, 50%) |
42 |
43 | darken(#6cf620, 30%) // 深 |
44 | lighten(#2e7805, 50%) // 亮 |
45 |
46 | fade-out(#fab, .5) |
47 | fade-in(rgba(#fab, .5), .5) |
48 | */ |
49 |
50 | /* change-color函式 - 為color設定任何屬性 */ |
51 | /* |
52 | change-color($color, [$red], [$green], [$blue], |
53 | [$hue], [$saturation], [$lightness], [$alpha]) |
54 |
55 | change-color(#ba5637, $hue:60); |
56 | change-color(#8e9cb3, $saturation:100); |
57 | change-color(#6cf620, $green:60, &blue:100); |
58 | */ |
59 |
60 | /* adjust-color函式 - 為color設定任何操作屬性 */ |
61 | /* |
62 | adjust-color($color, [$red], [$green], [$blue], |
63 | [$hue], [$saturation], [$lightness], [$alpha]); |
64 |
65 | adjust-color(#d3fa7b, $hue:60, $lightness: -20%); |
66 | adjust-color(#5f8fe3, $green:100, $alpha: -0.25); |
67 | */ |
68 |
69 | /* scale-color函式 - 為color設定動態比例屬性(以百分比為基礎) */ |
70 | /* |
71 | scale-color($color, [$red], [$green], [$blue], |
72 | [$saturation], [$lightness], [$alpha]); |
73 |
74 | scale-color(#adf609, $lightness:50%); |
75 | adjust-color(#adf609, $lightness:50%); |
76 |
77 | 如果: |
78 | lightness 是 0% |
79 | #adf609 是 50% |
80 | scale-color 是 75% |
81 | adjust-color 是 100% |
82 | */ |
顏色 SCSS 轉成 CSS
01 | @charset "UTF-8" ; |
02 | /* RGBA 函式 */ |
03 | a { |
04 | color : rgba( 0 , 0 , 255 , 0.75 ); } |
05 |
06 | p { |
07 | background : rgba( 255 , 255 , 170 , 0.25 ); } |
08 |
09 | button { |
10 | color : black ; } |
簡報 Page 55 裡的 a {color: rgba(blue, .75);} 給的 CSS 答案是錯誤的。
SCSS 語法: Custom Functions, 自訂函式
與程式裡的自訂函式觀念相同,我們能自行定義要執行的函式運作,進行 SCSS 相關運算之後,再將結果回傳。
自訂函式 SCSS 範例
01 | /* 自訂函式1 */ |
02 | @function pxem($px, $context: 16px ) { |
03 | @return ($px / $context) * 1em ; |
04 | } |
05 |
06 | /* 使用自訂函式 pxem */ |
07 | article h 2 { font-size : pxem( 45px ); } |
08 |
09 | /* 自訂函式2 */ |
10 | @function text-contrast($gb, $light: #fff , $dark: #000 ) { |
11 | $darkgb: lightness($gb) < lightness( gray ); |
12 | @return if($darkgb, $light, $dark); |
13 | } |
14 |
15 | /* 使用自訂函式 text-contrast */ |
16 | @mixin easy-button($gb) { |
17 | color : text-contrast($gb); |
18 | background : linear-gradient(lighten($gb, 8 ), darken($gb, 8 )); |
19 | } |
20 |
21 | button { @include easy-button( blue ); } |
自訂函式 SCSS 轉成 CSS
1 | @charset "UTF-8" ; |
2 | /* 使用自訂函式 pxem */ |
3 | article h 2 { |
4 | font-size : 2.813em ; } |
5 |
6 | /* 使用自訂函式 text-contrast */ |
7 | button { |
8 | color : white ; |
9 | background : linear-gradient( #2929ff , #0000d6 ); } |
沒有留言:
張貼留言
感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。