CSS、SCSS 和 SASS 的语法差异

CSS、SCSS 和 SASS 的语法差异

CSS (Cascading Style Sheets)

• 标准样式表语言，所有浏览器原生支持
• 语法特点 ：
  • 使用大括号 {} 包裹规则
  • 使用分号 ; 结束声明
  • 简单的选择器-属性-值结构

.container {
  width: 100%;
  margin: 0 auto;
}

SCSS (Sassy CSS)

• CSS的超集，所有合法CSS都是合法SCSS
• 语法特点 ：
  • 保留CSS的大括号和分号语法
  • 添加了变量、嵌套、混合等高级功能
  • 文件扩展名为.scss

$primary-color: #333;

.container {
  width: 100%;
  margin: 0 auto;
  
  p {
    color: $primary-color;
  }
}

SASS (Syntactically Awesome Style Sheets)

• 缩进语法（较老的语法形式）
• 语法特点 ：

  • 不使用大括号和分号

  • 使用缩进和换行来定义结构

  • 文件扩展名为 .sass

    $primary-color: #333

    .container
    width: 100%
    margin: 0 auto

    p
    color: $primary-color

主要功能差异

特性	CSS	SCSS	SASS
变量	❌	✅	✅
嵌套规则	❌	✅	✅
混合(Mixins)	❌	✅	✅
继承	❌	✅	✅
运算	❌	✅	✅
大括号语法	✅	✅	❌
分号	✅	✅	❌
缩进语法	❌	❌	✅

SASS & SCSS

1. SASS (缩进语法)

   • 受 Python/Haml 影响
   • 优点：更简洁，减少标点符号
   • 缺点：与 CSS 不兼容，学习曲线较陡

2. SCSS

   • 设计为 CSS 的超集
   • 优点：
     • 任何 CSS 文件都可直接重命名为 .scss
     • 对前端开发者更友好
     • 保留了 CSS 的直观性

现代使用情况

• SCSS 成为标准：大多数项目使用 .scss

• SASS 语法仍有少量使用：主要在 Ruby 社区

• CSS 持续进化：已引入部分 SASS 特性（如 CSS 变量）