iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Modern Web

SASS 基礎初學三十天系列 第 2

DAY 02 CSS 預處理器

預處理器是什麼?

透過不同的編譯方式,最後都會產生成 CSS 的樣式,在變成 CSS 前,這些預處理器的寫法可以提升加速我們的開發進度、維護性、及可讀性,讓 CSS 不再像傳統方式一樣,一次針對一種 Class 去做設計,當下一次要做一個一樣但又有些微變化的 class 時,還要再更新一個版本,而重複寫了大部分的 property,當切版切久了,你就會意識到重複的 CSS 有多煩XD

常見的預處理器

直到現在,已經發展了很多的預處理器,例如:

  • Sass(SCSS)
  • LESS
  • CSS Cacheer
  • DT CSS
  • Turbine
  • Stylus
  • Swithch CSS

目前比較主流的分為 Sass/SCSS、Less、Stylus 三個陣營,而其中較多人使用的則是 SASS/SCSS,也是本次要挑戰的預處理器。

Untitled

我有需要使用 CSS 預處理器嗎?

如果你是一人專案,只是要編寫一些基本、簡單的 CSS,其實也不一定要用到預處理器,畢竟他還要經過加工編譯過後才能成為 CSS。

但如果是與他人協作,或是大型專案的樣式設計,編寫成 SASS 會加速整體的開發,也可以避免每次要修改樣式,而經過一連串的 Ctrl + F 取代過程XD

下一篇來詳細介紹 SASS/SCSS:D


除此之外,也歡迎大家走走逛逛關於我們團隊夥伴的文章
lu23770127 - SASS 基礎初學三十天
10u1 - 糟了!是世界奇觀!
juck30808 - Python - 數位行銷分析與 Youtube API 教學
HLD - 淺談物件導向與Design Pattern介紹
SiQing47 - 前端?後端?你早晚都要全端的,何不從現在開始?


上一篇
DAY 01 前言
下一篇
DAY 03 SCSS ? SASS ?
系列文
SASS 基礎初學三十天30

2 則留言

0
Siqing47
iT邦新手 5 級 ‧ 2021-09-17 19:58:29

我都直接不寫CSS

Tilda iT邦新手 5 級 ‧ 2021-09-19 02:47:49 檢舉

QQ

0
juck30808
iT邦新手 2 級 ‧ 2021-09-18 15:05:14

推推!

我要留言

立即登入留言