SCSS, CSS 教學 初學者常見的觀念與技巧

me
林彥成
2018-08-24 | 3 min.
文章目錄
  1. 1. 命名規則
  2. 2. 變數使用
  3. 3. @mixin @extend
  4. 4. iphone X safe area
  5. 5. hover 換圖
  6. 6. bootstrap 手機版調整 col 順序
  7. 7. 字型
  8. 8. 動畫
  9. 9. 寬度計算
  10. 10. 長度單位
  11. 11. 隱藏 Scroll Bar

紀錄一下怎麼使用 BEM, SCSS 變數, mixin, extend, iPhoneX safe area, hover 換圖, Bootstrap col 順序。

命名規則

BEM 命名規則,header__title--hover,header 中的 title 在 hover 時的狀態,覺得這樣的命名方法提供了一個統一又易讀的原則,有原則可預測性就高,就算什麼寫法都不去背誦,也可以透過這樣的原則來理解當時的想法。

變數使用

使用定義主色調,這樣在未來需要調整主色調時速度會快很多,不用全部搜尋再取代還擔心取代錯誤。
$primary-color: #ffffff;
$second-color: #000000;

@mixin @extend

@mixin 的做法是可以帶入變數,然後生成客製化樣式,譬如當同樣的一個版但需要套不同圖或是顏色,這樣的做法就會非常方便,@extend 就比較單純可以當成注入性質就好了,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
@mixin setSpecail($size, $color) {
font-size: $size;
color: $color;
}
.IAmSpecailOne {
@include setSpecail(sizeOne , colorOne);
}
.IAmSpecailTwo {
@include setSpecail(sizeTwo , colorTwo);
}

button {
width:80 px ;
height:40 px ;
}

.button--primary {
@extend %button ;
background-color:white ;
}

.button--success {
@extend %button ;
background-color:green;
}
.button--error {
@extend %button ;
background-color:red;
}

那跟 bootstrap 那種一直加上去的方法差異在哪? class=”btn btn-default btn-large”,覺得差異在函式庫要比較彈性,所以需要多寫幾種,但如果是自己要用,像 “button” 這種可能就不用出現了 @@ 直接用 % 告訴編譯器說這個不用了,只是個注入用的變數。

iphone X safe area

因為 iphone X 把按鈕拔掉了,所以操作介面上,底部會出現一條線,滿版的螢幕上也會有瀏海, 所以蘋果定義了幾個特殊屬性讓大家設定,讓大家可以透過安全顯示範圍的值來控制上下左右是否需要留白

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

hover 換圖

如果今天有需求是需要在 hover 換圖,直覺上會想要去抽換掉 image 的 url,在 chrome 可以直接在 content 裡面進行設定,但是 firefox, edge 就會有問題,所以又需要多寫一個偽元素並加在偽元素中,這種都是暴力解的方式,其實最好的方法還是不要用 img,改用一個假的容器設定圖片高度再加上 background-image 就好了。

1
2
3
4
5
6
7
8
9
10
11
12
13
img {
content: url("./img/test.png");
&:hover {
content: url("./img/test2.png");
}
}

.mockimg {
background-image: url("./img/test.png");
&:hover {
background-image: url("./img/test2.png");
}
}

bootstrap 手機版調整 col 順序

有時候就是會想要讓手機板的順序比較賞心悅目,這時候就可以用到內建的 pull 以及 push 來改變電腦版的位置,這樣當手機版 push 或是 pull 的效果消失時,就會是想要的手機版順序了。

1
2
3
4
<div className="row">
<div className="col-md-9 col-md-push-3"></div>
<div className="col-md-3 col-md-pull-9"></div>
</div>

字型

因為 safari 跟 chrome 的關係,所以會需要有不一樣的字形,兩種都挑了類似的之後,覺得可以就太天真了。作業系統也會影響,會 windows 的 chrome 跟 mac 的字型其實也有點差異,底下是參照網路論壇的,然後拿掉幾個不適用的,為什麼會有不適用的出現,因為考慮到中文字以及需要用的特殊字元,各位大大可以自由調換順序,看看結果如何。

1
2
font-family: PingFang TC, 黑體-繁, Heiti TC, 蘋果儷中黑, Apple LiGothic Medium, 微軟正黑體,
Microsoft JhengHei, sans-serif;

動畫

蠻推薦 animate.css !!!! 也有提供 custom build 的功能。
https://daneden.github.io/animate.css/

寬度計算

box-sizing: border-box;, width 和 height 屬性包括內容(content),內邊距(padding)和邊框(border)。

長度單位

樣式檔中,大小有絕對單位與相對單位兩種,其中只有 px 是絕對單位,另外除了行高 (line-height) 可以用純數字 (相對文字大小倍數) 外,大多都會是下面幾種

pxremem%vwvh
絕對相對相對相對相對相對
數值倍數倍數百分比百分比百分比
rootparentparent螢幕寬度螢幕高度

此外也分享一個我自己都蠻晚才知道的冷知識:

瀏覽器預設 root 的值,等於 16px

這就是為什麼普遍網頁設計會用 8px 或是 8 的倍數當作單位的原因,接下來直接看 bootstrap4 的設定,不難看出都是用 rem 來當作基本單位,透過相對單位,我們可以透過少量的程式碼解決蠻多可能會遇到的問題。

  • em 如果只想限制區域比例的問題就可以使用,譬如部落格文章顯示想要調整字體大小
  • rem 在 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
40
h1,
.h1 {
font-size: 2.5rem;
}
h2,
.h2 {
font-size: 2rem;
}
h3,
.h3 {
font-size: 1.75rem;
}
h4,
.h4 {
font-size: 1.5rem;
}
h5,
.h5 {
font-size: 1.25rem;
}
h6,
.h6 {
font-size: 1rem;
}
.pt-1,
.py-1 {
padding-top: 0.25rem !important;
}
.pr-1,
.px-1 {
padding-right: 0.25rem !important;
}
.pb-1,
.py-1 {
padding-bottom: 0.25rem !important;
}
.pl-1,
.px-1 {
padding-left: 0.25rem !important;
}

隱藏 Scroll Bar

1
2
3
4
5
.hide-scrollbar {
overflow: auto;
-ms-overflow-style: none; /* IE 11 */
scrollbar-width: none; /* Firefox 64 */
}

喜歡這篇文章,請幫忙拍拍手喔 🤣

share