iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

TailwindCSS - 從零開始系列 第 18

TailwindCSS 從零開始 - 簡單認識 PostCSS

postcss

此系列文章已改編成書,歡迎購買:https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw

前面有提到安裝 TailwindCSS 推薦使用 PostCSS,前面練習的都是沒有相依 PostCSS 來練習,但該面對的總是要面對,先來認識一下關於 CSS 的處理,就以一般前端常用的 SCSS 為例。

關於預處理器與後處理器

從字面上可以得知,CSS 的處理可以分為預處理跟後處理 (廢話),相信有切版一段時間的前端工程師都享受到預處理器的方便之處,可以統一命名變數整理關於字型顏色、大小或是各種共用的屬性,避免不斷輸入一樣的色碼,甚至在大幅修改的時候,可以透過變數免去修改的時間。

預處理器

寫的內容瀏覽器並看不懂,但透過 build 之後編譯成瀏覽器看得懂的 CSS 語法。

像是今天要寫一個圓角,可以透過變數撰寫顏色,並且可以用 & 延續要做 :hover 效果,不必重新寫一次 class 的動作。

demo: https://codepen.io/hnzxewqw/pen/YzQXvVq

SCSS

$bg-primary: red;
$bg-hover:orange;

.box {
	width: 100px;
	height: 100px;
	border-radius: 10px;
	background-color: $bg-primary;
	&:hover{
		background-color:$bg-hover ;
	}
}

編譯成 CSS 後

CSS

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: red;
}
.box:hover {
  background-color: orange;
}

是不是超方便,但 SCSS 有一個要注意的地方,如果要使用預處理器,就要使用他所有的包含的內容,不能自行刪減,就算你這個專案用不到,但還是需要整個使用。

後處理器

既然能預處理也可以後處理,而 PostCSS 就是屬於後處理器,其中方便之處是可以自行增減自己需要的編譯的部分,最常用的就是個瀏覽器的前綴詞。套件是這個 autoprefixer

後處理器

直接先看官方範例,下方是要寫的樣式,

.my-class, #my-id {
    border-radius: 1em;
    transition: all 1s ease;
    box-shadow: #123456 0 0 10px;
}

但如果要自行加上各瀏覽器的前綴詞會變這樣,

.my-class, #my-id {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -moz-box-shadow: #123456 0 0 10px;
    -webkit-box-shadow: #123456 0 0 10px;
    box-shadow: #123456 0 0 10px
    }

光是去找相符的瀏覽器就搞死自己,但是透過後處理器編譯後,就可以直接這樣了,當然預處理器也可以辦到。

那幹嘛用後處理器

  1. 可以建立自己的套件(plugins)。
  2. 使用標準的 CSS 語法。

PostCSS 起手式

  • 安裝 PostCSS 與其插件。
npm install postcss postcss-loader autoprefixer precss --save-dev

這邊有安裝剛剛提到的前綴詞插件 autoprefixer

  • 安裝完後會有一個 postcss.config.js 檔案,加入需要用到的 press 與 autoprefixer 套件即可。

所有想要用的擴充套件都要在 postcss.config.js 設定檔才行。當然用在 tailwind 的時候就是要在 tailwind.config.js 裡面設定。

module.exports = {
  plugins: {
    precss: {}, // 使用類似 SASS 的功能,例如:變數
    autoprefixer: {
      // 加入各家瀏覽器的前綴詞
      browsers: [
        // 指定支援的瀏覽器版本
        'Chrome >= 52',
        'FireFox >= 44',
        'Safari >= 7',
        'Explorer >= 11',
        'last 2 Edge versions',
      ],
    },
  },
};

這樣就可以使用 autoprefixer 的套件了。

參考資料


上一篇
TailwindCSS 從零開始 - 切一個響應式留言按鈕畫面
下一篇
TailwindCSS - 初探 Just in Time 模式 v2.2
系列文
TailwindCSS - 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言