CSS 轉 SASS 是將標準的 CSS 代碼轉換為 SASS（Syntactically Awesome Stylesheets） 代碼的過程。SASS 是一個強大的 CSS 預處理器，它允許你使用變數、嵌套、混入（mixins）、繼承等功能來更高效地編寫 CSS。
SASS 的兩種語法：
SASS（縮排語法）：這種語法不使用花括號 {} 和分號 ;，而是依賴縮排來表示範圍，語法簡潔。
SCSS（Sassy CSS）：這種語法更接近 CSS，使用花括號 {} 和分號 ;，它是 SASS 的一個擴展，並且與 CSS 完全兼容。
在這裡，我們將討論 SASS 縮排語法（也稱為 .sass）的轉換，因為它與標準 CSS 語法有較大區別。
CSS 示例：
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
轉換為 SASS（縮排語法）：
SASS 允許不使用花括號和分號來描述結構，而是依賴縮排來表示範圍。
sass
body
font-family: Arial, sans-serif
background-color: #f0f0f0
h1
color: #333
font-size: 2em
p
color: #555
line-height: 1.6
SASS 主要特性：
變數：可以定義變數來存儲顏色、字體、邊距等屬性，這樣可以重用它們，避免重複代碼。
sass
$font-family: Arial, sans-serif
$bg-color: #f0f0f0
$text-color: #333
body
font-family: $font-family
background-color: $bg-color
嵌套：SASS 支持樣式的嵌套，這使得樣式結構更加清晰，並且可以模擬 HTML 結構。
sass
.container
width: 100%
.header
background: #333
color: white
.content
padding: 20px
繼承：可以讓一個選擇器繼承另一個選擇器的樣式，減少重複的代碼。
sass
.base
font-family: Arial, sans-serif
color: #333
.header
@extend .base
font-size: 2em
混入（Mixin）：混入是一組可以在多個地方重複使用的 CSS 規則。你可以傳遞參數，使其更具動態性。
sass
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.box
+border-radius(5px)
運算：SASS 支持簡單的數學運算，可以用來計算顏色、大小、邊距等數值。
sass
$base-size: 10px
.box
width: $base-size * 10
如何將 CSS 轉換為 SASS（縮排語法）？
1. 直接轉換：
將現有的 CSS 代碼，去掉花括號和分號，並進行適當的縮排，這樣可以將它轉換為 SASS 語法。這是最簡單的方法。
例如：
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
轉換為：
sass
body
font-family: Arial, sans-serif
background-color: #f0f0f0
h1
color: #333
font-size: 2em
p
color: #555
line-height: 1.6
2. 使用 SASS 特性：
你還可以根據需要利用 SASS 的變數、嵌套等特性來重構樣式表，使其更具可維護性。
例如，使用變數來定義常用的顏色：
sass
$primary-color: #333
$secondary-color: #555
$background-color: #f0f0f0
body
background-color: $background-color
h1
color: $primary-color
font-size: 2em
p
color: $secondary-color
line-height: 1.6
3. 將 SCSS 轉換為 SASS：
如果你有 SCSS 代碼，可以直接將其轉換為 SASS。這只需要去掉花括號 {} 和分號 ;，並進行縮排即可。
例如，SCSS 代碼：
scss
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
轉換為 SASS：
sass
body
font-family: Arial, sans-serif
background-color: #f0f0f0
h1
color: #333
font-size: 2em
p
color: #555
line-height: 1.6