SCSS, CSS 常用技巧 BEM, SCSS 變數, mixin, extend, iPhoneX safe area, hover 換圖, Bootstrap col 順序

Lin Yen-Cheng on 2018-08-24 9 min. read

命名規則

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

變數使用

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

@mixin @extend

@mixin 的做法是可以帶入變數,然後生成客製化樣式,譬如當同樣的一個版但需要套不同圖或是顏色,這樣的做法就會非常方便,@extend 就比較單純可以當成注入性質就好了,mixin 搭配 rwd 的寫法

@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 就好了。

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 的效果消失時,就會是想要的手機版順序了。

<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 的字型其實也有點差異,底下是參照網路論壇的,然後拿掉幾個不適用的,為什麼會有不適用的出現,因為考慮到中文字以及需要用的特殊字元,各位大大可以自由調換順序,看看結果如何。

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 或是各種版面大小,想整體調整就比較建議用這個
h1,
.h1 &#123;
  font-size: 2.5rem;
&#125;
h2,
.h2 &#123;
  font-size: 2rem;
&#125;
h3,
.h3 &#123;
  font-size: 1.75rem;
&#125;
h4,
.h4 &#123;
  font-size: 1.5rem;
&#125;
h5,
.h5 &#123;
  font-size: 1.25rem;
&#125;
h6,
.h6 &#123;
  font-size: 1rem;
&#125;
.pt-1,
.py-1 &#123;
  padding-top: 0.25rem !important;
&#125;
.pr-1,
.px-1 &#123;
  padding-right: 0.25rem !important;
&#125;
.pb-1,
.py-1 &#123;
  padding-bottom: 0.25rem !important;
&#125;
.pl-1,
.px-1 &#123;
  padding-left: 0.25rem !important;
&#125;

隱藏 Scroll Bar

.hide-scrollbar
&#123;
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
&#125;

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

share