CSS 转 SCSS 是将传统的 CSS 代码转换为 SCSS（Sassy CSS，Sass 的一种语法）格式的过程。SCSS 是 Sass（Syntactically Awesome Stylesheets）的扩展语法，提供了更强大的功能和更好的可维护性，如变量、嵌套、混合宏（mixins）、继承、条件和循环等。
虽然 SCSS 本质上是 Sass 的一种语法，它与普通 CSS 的语法相似，基本上你可以将 CSS 代码直接粘贴到 SCSS 文件中，SCSS 会自动兼容这些代码。
1. CSS 转 SCSS 示例
假设你有以下的 CSS 代码：
css
/* 原始 CSS */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #666;
line-height: 1.5;
}
转换为 SCSS 后，基本的代码可以保持不变，但你可以使用 SCSS 的一些高级功能来优化它，例如变量、嵌套、混合宏等。
2. SCSS 的基本功能
使用变量
SCSS 允许使用变量来存储颜色、字体、尺寸等常用值，这使得样式表更加动态和易于管理。
scss
/* SCSS */
$bg-color: #f0f0f0;
$font-family: Arial, sans-serif;
$main-color: #333;
$secondary-color: #666;
body {
background-color: $bg-color;
font-family: $font-family;
}
h1 {
color: $main-color;
font-size: 2em;
}
p {
color: $secondary-color;
line-height: 1.5;
}
使用嵌套
SCSS 支持嵌套语法，可以直接嵌套样式规则来表达层级结构，从而减少冗余的选择器。
scss
/* SCSS */
.container {
width: 100%;
.header {
background-color: #f0f0f0;
color: #333;
}
}
转换为 CSS 后：
css
.container {
width: 100%;
}
.container .header {
background-color: #f0f0f0;
color: #333;
}
使用混合宏（Mixins）
SCSS 支持混合宏，它允许你将可复用的样式块封装在一个混合宏中，然后通过调用该宏来应用样式。混合宏可以带有参数，使其更加灵活。
scss
/* SCSS */
@mixin button($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
padding: 10px 15px;
border-radius: 5px;
}
.primary-btn {
@include button(#007bff, white);
}
.secondary-btn {
@include button(#6c757d, white);
}
转换为 CSS 后：
css
.primary-btn {
background-color: #007bff;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
.secondary-btn {
background-color: #6c757d;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
使用继承（Extend）
SCSS 允许一个选择器继承另一个选择器的样式。这有助于减少重复代码，特别是当多个选择器共享相同的样式时。
scss
/* SCSS */
.btn {
padding: 10px 15px;
border-radius: 5px;
}
.primary-btn {
@extend .btn;
background-color: #007bff;
color: white;
}
.secondary-btn {
@extend .btn;
background-color: #6c757d;
color: white;
}
转换为 CSS 后：
css
.btn, .primary-btn, .secondary-btn {
padding: 10px 15px;
border-radius: 5px;
}
.primary-btn {
background-color: #007bff;
color: white;
}
.secondary-btn {
background-color: #6c757d;
color: white;
}
3. 将 CSS 转换为 SCSS
手动转换
你可以通过以下步骤将传统的 CSS 代码转换为 SCSS：
提取变量：将 CSS 中常用的颜色、字体、尺寸等提取为 SCSS 变量。这样可以提高样式表的灵活性和可维护性。
使用嵌套：将层级结构清晰的 CSS 规则嵌套在父规则内，减少冗余的选择器。
使用混合宏和继承：对于重复使用的样式，可以将它们封装为混合宏或使用 @extend 继承已有样式。
数学运算：SCSS 支持在样式中进行数学运算（如加法、减法等），可以用来动态计算值。