CSS 前處理器

相關問題

• CSS 主要有哪些前處理器
• 為什麼需要用前處理器
• 各前處理器優缺點

回答關鍵點

Sass   Less   Stylus   PostCSS   工程化   提升效率

CSS 本身不屬於可程式語言，當前端專案逐漸龐大之後 CSS 的維護也愈加困難。CSS 前處理器所做的本質上是為 CSS 增加一些可程式設計的特性，透過  變數、  巢狀、  簡單的程式邏輯、  計算、  函式等特性，透過  工程化的手段讓 CSS 更易維護，提升開發效率。

目前主流的 CSS 前處理器主要有 Sass、Less、Stylus、PostCSS。

知識點深入

1. PostCSS  [1]

PostCSS 是目前最為流行的 CSS 預/後處理器。PostCSS 本體功能比較單一，它提供一種用 JavaScript 來處理 CSS 的方式。PostCSS 會把 CSS 解析成 AST（Abstract Syntax Tree 抽象語法樹），之後由其他外掛進行不同的處理。

功能

PostCSS 本體功能比較單一，大多數的 CSS 處理功能都由外掛提供，下面是一些常用的外掛：

• Autoprefixer 為 CSS 中的屬性新增瀏覽器特定的字首。

• postcss-preset-env 根據 browserslist 指定的目標瀏覽器將一些 CSS 的新特性轉換為目標瀏覽器所支援的語法。

• cssnano 提供 CSS 壓縮功能。

• postcss-nested 提供 CSS 巢狀功能。

• postcss-px-to-viewport 提供 px 轉 vw 功能。

• postcss-custom-properties 支援 CSS 的自定義屬性。

優點

• 外掛系統完善，擴充套件性強。
• 配合外掛功能齊全。
• 生態優秀。

缺點

• 配置相對複雜。

2. Sass  [2]

Sass 在完全相容 CSS 語法的前提下，給 CSS 提供了變數、巢狀、混合、運算子、自定義函式等可程式設計能力。

功能

Sass 常用的有幾種功能：

• 變數：變數中可以儲存顏色、字型或任何 CSS 值。
• 巢狀：可巢狀 CSS 選擇器，提供清晰的層次結構。
• 混合：可以定義&重用程式碼塊。
• 擴充套件/整合：可以在一個選擇器內繼承另一個選擇器。
• 運算子：可以在 CSS 中使用運算子進行計算。
• 條件/迴圈語句：可以迴圈/條件生成 CSS。
• 自定義函式：可以自定義複雜操作的函式。

優點

• 使用廣泛。
• 功能支援完善。
• 可程式設計能力強。

缺點

• CSS 的複雜度不可控。
• node-sass 國內安裝不易（非 Sass 本身的缺點，dart-sass 可代替）。

3. Less  [3]

Less 和 Sass 類似，完全相容 CSS 語法，並給 CSS 提供了變數、巢狀、混合、運算等可程式設計能力。Less 透過 JavaScript 實現，可在瀏覽器端直接使用。

功能

Less 常用的有幾種功能：

• 變數：變數中可以儲存顏色、字型或任何 CSS 值。
• 巢狀：可巢狀 CSS 選擇器，提供清晰的層次結構。
• 混合：可以定義&重用的程式碼塊。
• 擴充套件/整合：可以在一個選擇器內繼承另一個選擇器。
• 運算：可以在 CSS 中進行計算。
• 條件/迴圈語句：可以迴圈/條件生成 CSS。

優點

• 使用廣泛。
• 可以在瀏覽器中執行，容易實現主題定製功能。

缺點

• 不支援自定義函式（可透過 mixins 實現簡單邏輯）。
• 程式設計能力相對較弱。

4. Stylus  [4]

Stylus 基礎功能和 Sass / Less 十分類似。Stylus 的特點是冒號、分號、逗號和括號都是可選項，所以可以寫出非常簡潔的 CSS，示例如下：

body
  background-color: #000body::after
  content: 'HZFEStudio'
  color: #fff
  font-size: 20px

擴充套件閱讀

1. CSS Modules  [5]

CSS Modules 和前文介紹的前處理器不同，不是可程式設計化的 CSS，而僅是給 CSS 檔案加入了作用域和模組依賴，主要是為了解決 CSS 全域性汙染的痛點以及為了解決全域性汙染而巢狀過深的問題。使用示例如下：

/* style.css */.hzfeTitle {  color: #666;  font-size: 20px;
}

import style from "./style.css";document.body.innerHTML = `<h1 class="${style.hzfeTitle}">HZFEStudio</h1>`;

2. CSS-in-JS

如名字所見，CSS-in-JS 是一種在 JavaScript 裡寫 CSS 的方式。利用 JS 的優勢可實現非常靈活的可擴充套件的樣式。CSS-in-JS 有很多實現，目前比較流行的是  。

透過 Styled-components 寫 CSS 的示例如下：

import React from "react";import styled from "styled-components";function hzfe() {  const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: #666;
  `;  return <Title>HZFEStudio</Title>;
}

3. Tailwind 和 Utility-first CSS

近幾年隨著 Tailwind 的流行，功能類優先（Utility-first CSS）的理念也再次流行起來。這裡簡單介紹一下 Tailwind CSS。

3.1 Tailwind  [6]

Tailwind CSS 是一個功能類優先的 CSS 框架，透過組合不同的類名實現頁面設計。Tailwind 主要優勢如下：

1. 不用考慮 class 的命名。
2. CSS 檔案大小增長可控，透過   purge 可生成非常小的 CSS 檔案。
3. 統一設計系統下的樣式與佈局。
4. IDE 整合優秀。