Sass（Syntactically Awesome Style Sheets）有两种语法格式：SCSS 和 缩进语法（Sass）。它们在语法结构上有显著差异，但功能完全一致。以下是它们的对比和示例：

一、SCSS（Sassy CSS）

• 文件扩展名：.scss
• 语法风格：完全兼容 CSS 语法，使用 {} 包裹代码块，用 ; 分隔语句。
• 特点：适合从 CSS 过渡到 Sass 的用户，学习成本低。

// 变量定义
$primary-color: #333;

// 嵌套结构
.container {
  padding: 20px;
  .title {
    color: $primary-color;
    &:hover {
      text-decoration: underline;
    }
  }
}

// 混入（Mixin）
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 使用 Mixin
.box {
  @include flex-center;
}

二、缩进语法（Sass）

• 文件扩展名：.sass
• 语法风格：使用缩进代替 {} 和 ;，代码更简洁。
• 特点：适合追求简洁的开发者，但对缩进敏感（类似 Python）。

// 变量定义
$primary-color: #333

// 嵌套结构
.container
  padding: 20px
  .title
    color: $primary-color
    &:hover
      text-decoration: underline

// 混合宏（Mixin）
=flex-center
  display: flex
  justify-content: center
  align-items: center

// 使用 Mixin
.box
  +flex-center

三、主要区别

特性	SCSS	缩进语法（Sass）
文件扩展名	.scss	.sass
括号和分号	使用 {} 和 ;	依赖缩进，无需 {} 和 ;
兼容性	完全兼容 CSS	不直接兼容 CSS
代码风格	类似传统 CSS	简洁，类似 Python/YAML
混合宏定义	@mixin name { ... }	=name ...
混合宏调用	@include name	+name
变量赋值符	$var: value;	$var: value（无分号）

---

四、如何选择？

• SCSS：推荐大多数项目使用，尤其团队协作时，语法更直观且兼容 CSS。
• 缩进语法：适合个人项目或追求极简风格的开发者。

两种语法可以互相转换（通过工具如 sass-convert），最终编译结果相同。根据团队习惯或项目需求选择即可！

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24