CSS、SCSS 和 SASS 的语法差异

CSS、SCSS 和 SASS 的语法差异

CSS (Cascading Style Sheets)

  • 标准样式表语言,所有浏览器原生支持
  • 语法特点
    • 使用大括号 {} 包裹规则
    • 使用分号 ; 结束声明
    • 简单的选择器-属性-值结构
css 复制代码
.container {
  width: 100%;
  margin: 0 auto;
}

SCSS (Sassy CSS)

  • CSS的超集,所有合法CSS都是合法SCSS
  • 语法特点
    • 保留CSS的大括号和分号语法
    • 添加了变量、嵌套、混合等高级功能
    • 文件扩展名为.scss
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 变量)

相关推荐
β添砖java1 小时前
CSS网格布局
前端·css·html
wyzqhhhh21 小时前
less和sass
前端·less·sass
EveryPossible1 天前
带有渐变光晕
前端·javascript·css
qianmo20211 天前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3
zhangxuyu11181 天前
flex布局学习记录
前端·css·学习
C+ 安口木2 天前
CSS通用优惠券样式
前端·css
蓝莓味的口香糖2 天前
【CSS】flex布局
前端·css
EveryPossible2 天前
第一版代码
前端·javascript·css
Filotimo_3 天前
2.CSS3.(2).html
前端·css
爱吃甜品的糯米团子3 天前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css