預 CSS（Pre CSS）是一種基于 JavaScript 的 CSS 預處理器。它允許開發者在編寫 CSS 時，使用 JavaScript 的邏輯和語法，從而使 CSS 更具表現力、可組合性和可維護性。

// 安裝預 CSS
npm install precss --save-dev
// 在 webpack.config.js 中配置預處理器
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'precss'
]
}
]
}

預 CSS 提供了一些很有用的特性，例如：

• 變量：使用 var() 函數定義和使用變量。
• Mixins：類似函數的代碼塊，可包含一系列 CSS 屬性，并在需要時重復使用。
• 嵌套規則：可以在選擇器內部編寫其他選擇器和屬性。
• 算術運算：支持加減乘除等四則運算來計算 CSS 屬性的值。

使用預 CSS 可以大大提高開發效率，使代碼更加清晰、易于維護。但是，過度使用預處理器也可能會導致代碼變得混亂且難以理解。

@define-mixin flexbox() {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
@mixin flexbox();
}

總的來說，預 CSS 是一個非常實用的工具，它可以使 CSS 編寫更加靈活、高效和易于維護。對于那些想要在 CSS 中使用變量和函數的開發者來說，預處理器是一個必不可少的工具。