CSS 轉 SCSS

CSS 轉 SCSS 是將標準的 CSS（層疊樣式表） 代碼轉換為 SCSS（Sassy CSS） 代碼的過程。SCSS 是 Sass（Syntactically Awesome Stylesheets）的一種語法，Sass 是 CSS 預處理器，用於增強 CSS 的功能，提供變數、嵌套、混入、運算等功能。

SCSS 具有更接近 CSS 的語法，使得它與 CSS 完全兼容，因此可以直接將標準的 CSS 代碼改為 SCSS 代碼，而無需進行大規模的語法修改。

CSS 示例：
css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: #333;
font-size: 2em;
}

p {
color: #555;
line-height: 1.6;
}
轉換為 SCSS：
SCSS 允許你保留原來的 CSS 語法，並且可以進一步利用 SCSS 的特性進行擴展，比如變數、嵌套、混入等。對於普通的 CSS 代碼，你只需要直接將它保留在 SCSS 文件中。

scss

// 這是一個 SCSS 文件
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: #333;
font-size: 2em;
}

p {
color: #555;
line-height: 1.6;
}
SCSS 主要特性：
雖然將 CSS 轉換為 SCSS 只是簡單地將原來的 CSS 代碼放入 .scss 文件中，但 SCSS 還有一些額外的功能可以幫助提升開發效率和代碼維護性：

變數：可以定義變數來存儲顏色、字體、邊距等屬性，從而避免重複使用相同的值。

scss

$font-family: Arial, sans-serif;
$background-color: #f0f0f0;

body {
font-family: $font-family;
background-color: $background-color;
}
嵌套：SCSS 支持樣式的嵌套，這使得樣式結構更加直觀。

scss

.container {
width: 100%;
.header {
background: #333;
color: white;
}
.content {
padding: 20px;
}
}
運算：可以進行數學運算，如計算寬度、高度、顏色等。

scss

$base-size: 10px;

.box {
width: $base-size * 10;
}
混入（Mixin）：可以將重複使用的 CSS 代碼提取為混入，並在需要的地方調用。

scss

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

.box {
@include border-radius(5px);
}
如何將 CSS 轉換為 SCSS？
1. 直接轉換：
由於 SCSS 和 CSS 幾乎是一致的語法，您只需將現有的 CSS 代碼放入 .scss 文件中即可。SCSS 支持所有 CSS 語法，並且還增加了一些額外的功能。

例如，您可以將以下 CSS 代碼直接轉換為 SCSS：

css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: #333;
font-size: 2em;
}

p {
color: #555;
line-height: 1.6;
}
轉換為 SCSS 時，文件內容完全相同：

scss

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

h1 {
color: #333;
font-size: 2em;
}

p {
color: #555;
line-height: 1.6;
}
2. 利用 SCSS 特性：
如果您希望更充分地利用 SCSS 的功能，您可以將樣式重構，使用變數、嵌套和混入等特性。例如：

scss

$font-family: Arial, sans-serif;
$background-color: #f0f0f0;
$primary-color: #333;
$secondary-color: #555;

body {
font-family: $font-family;
background-color: $background-color;
}

h1 {
color: $primary-color;
font-size: 2em;
}

p {
color: $secondary-color;
line-height: 1.6;
}