CSS 前處理器

mengmengxin發表於2023-02-04

相關問題

  • 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 整合優秀。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70019667/viewspace-2933978/,如需轉載,請註明出處,否則將追究法律責任。

相關文章