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.containerwidth: 100%margin: 0 autopcolor: $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 变量）