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

相关推荐
结城20 分钟前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..26 分钟前
网络安全第三次作业
前端·css·html
小白阿龙43 分钟前
如何实现缓存音频功能(App端详解)
前端·css·html5
smile boy1 小时前
个人财务记录应用
前端·javascript·css·css3·html5
FogLetter21 小时前
从零复刻网易云音乐年度总结H5:技术细节与用户体验的完美结合
前端·css
前端老鹰1 天前
CSS mask-image:给元素 “戴” 上创意面具的隐藏技巧
前端·css
PineappleCoder1 天前
玩转CSS3新特性:让你的网页会“呼吸”!
前端·css·设计
未来之窗软件服务1 天前
免费版酒店管理系统之极简表单设计登录设计——仙盟创梦IDE
前端·css·仙盟创梦ide·东方仙盟·登录设计
Java&Develop2 天前
学生信息管理系统 - HTML实现增删改查
css·html·css3
上单带刀不带妹2 天前
CSS 单位完全指南:掌握 em、rem、vh、vw 等响应式布局核心单位
前端·css·html·网页布局