CSS 转 SASS 是将标准的 CSS 代码转换为 SASS（Syntactically Awesome Stylesheets）的过程。SASS 是一种 CSS 预处理器，它提供了更多的功能和更高的灵活性，像变量、嵌套、混合宏、继承等。SASS 有两种语法：一种是缩进式（SASS），另一种是 SCSS（Sassy CSS），与 CSS 语法相似。这里我们讨论的是将 CSS 转换为 SASS 的过程，其中 SASS 语法不使用花括号 {} 和分号 ;，而是依靠缩进来表示层级关系。
1. CSS 转 SASS 基本示例
假设你有以下的 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;
}
将其转换为 SASS（缩进式语法）后：
sass
/* 转换为 SASS */
$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
2. SASS 的基础特性
使用变量
SASS 允许你使用变量来存储颜色、字体、尺寸等常用的值。这样可以避免重复编写相同的值，增加代码的可维护性。
sass
$bg-color: #f0f0f0
$font-family: Arial, sans-serif
body
background-color: $bg-color
font-family: $font-family
使用嵌套
SASS 支持嵌套语法，这使得层级结构非常清晰。你可以将样式规则嵌套在父规则中，从而避免重复编写选择器。
sass
.container
width: 100%
.header
background-color: #f0f0f0
color: #333
转换为 CSS 后：
css
.container {
width: 100%;
}
.container .header {
background-color: #f0f0f0;
color: #333;
}
使用混合宏（Mixins）
SASS 允许你使用混合宏来封装可复用的样式块。这些混合宏可以带有参数，使得它们可以灵活地应用到不同的规则中。
sass
@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）
SASS 支持继承，使得样式可以在多个选择器之间共享。这有助于减少重复代码，特别是当多个规则共享相同的样式时。
sass
%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
.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 转换为 SASS
手动转换
提取变量：将 CSS 中常用的颜色、字体、尺寸等提取为 SASS 变量。例如，背景颜色、主字体等。
sass
$bg-color: #f0f0f0
$font-family: Arial, sans-serif
使用嵌套：将层级关系明显的 CSS 规则嵌套在父规则内，利用 SASS 的嵌套特性表示层级结构。
sass
.container
width: 100%
.header
background-color: #f0f0f0
color: #333
使用混合宏（Mixins）：对于可复用的样式块，使用 SASS 的混合宏来封装这些样式。
sass
@mixin button($bg-color, $text-color)
background-color: $bg-color
color: $text-color
padding: 10px 15px
border-radius: 5px
简化样式：删除冗余的选择器和规则，使用继承等技术来减少重复代码。