SCSS 和 CSS的異同點

我們可以使用css和scss來設置樣式。其中SCSS（Sassy CSS）是 CSS 預處理器 Sass（Syntactically Awesome Stylesheets）的一種語法格式，而 CSS（Cascading Style Sheets）是標準的樣式表語言。以下是它們的異同點：

1. 最終輸出：SCSS 和 CSS 最終都會被編譯成瀏覽器可識別的標準 CSS。

2. 核心功能：都用于定義網頁的樣式（如顏色、布局、字體等）。

3. 語法兼容：SCSS 完全兼容 CSS 語法，任何合法的 CSS 代碼也是合法的 SCSS 代碼。

不同點

特性	SCSS (Sass)	CSS
語法格式	支持嵌套、變量、混合等擴展語法，類似編程語言。	純聲明式語法，無嵌套或邏輯。
變量	支持變量（$primary-color: #333;）。	原生支持變量（--primary-color: #333;），但語法不同。
嵌套規則	支持嵌套（nav { ul { ... } }）。	不支持嵌套（需手動寫完整選擇器）。
混合（Mixins）	支持代碼復用（@mixin?和?@include）。	不支持，需重復代碼或使用 CSS 變量。
繼承	支持選擇器繼承（@extend）。	不支持，需通過類名或 CSS 變量模擬。
運算與函數	支持數學運算、顏色函數等（lighten()）。	有限支持（如?calc()）。
條件與循環	支持?@if、@for、@each?等邏輯控制。	不支持。
導入	@import?可合并文件，避免多次 HTTP 請求。	@import?會導致額外 HTTP 請求。
注釋	支持單行注釋（//）和多行注釋（/* */）。	僅支持多行注釋（/* */）。
編譯需求	需預編譯為 CSS 才能被瀏覽器識別。	瀏覽器直接解析，無需編譯。

使用場景

• SCSS：適合大型項目，需要模塊化、復用代碼或邏輯控制時。

• CSS：小型項目或需要減少工具鏈依賴時。現代 CSS（如變量、calc()）已能解決部分需求。

如何使用

在uni-app項目中，系統為我們預置了一個uni.scss文件，里邊設置了一些樣式，我們可以使用里邊聲明的樣式，也可以添加新的樣式，或者引入外部樣式。

使用uni.scss

比如uni.scss聲明了一個這樣的樣式：

在我們的頁面中可以直接使用：

.text{color: $uni-color-success;font-size: 52rpx;
}

uni.scss中引入其他scss的方式：

@import "@/common/scss/self.scss";

需要以@開頭使用import導入，后面接絕對路徑，絕對路徑也要以@開頭，最后以分號結尾。

注意uni.scss文件如果被修改，需要重新編譯下項目，直接使用熱更新可能會報錯。

頁面引入項目中定義的css的方式：

@import "@/common/css/style.css"

與uni.scss中引入其他scss不同的是，這里無需以分號結尾。

style.css代碼：

view{font-size: 40rpx;box-sizing: border-box;background: pink;
}

注意：在uni-app設置樣式時，為了實現自適應不同終端，應該使用rpx代替px.

在創建uni-app項目時，生成一個App.vue文件，我們可以在這里設置公共樣式：

<style>/*每個頁面公共css */
</style>

實現樣式的復用。