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 变量)

相关推荐
漂流瓶jz7 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
成遇9 天前
在Vscode中安装Sass并配置
vscode·rust·sass
skyymrj9 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
涵信10 天前
2025年CSS最新高频面试题及核心解析
前端·css
welkin10 天前
实现CSS动画中,遇到的几个问题
前端·css
不爱说话郭德纲10 天前
👨‍面试官:你为什么用Less / Scss ?别人用你就用?🤔
前端·css·面试
轻语呢喃10 天前
Stylus初体验:从入门到深入详解
css·stylus
小桥风满袖10 天前
Three.js-硬要自学系列36之专项学习包围盒
前端·css·three.js
编程小明10 天前
scroll-marker实现tab效果
前端·css