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

相关推荐
Predestination王瀞潞24 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
冰暮流星29 分钟前
css之box-sizing属性
前端·javascript·css
倚肆32 分钟前
CSS ::before 和 ::after 伪元素详解
前端·css
小九今天不码代码3 小时前
巧用 CSS linear-gradient 实现多种下划线文字特效(纯 CSS 无需额外标签)
css·css3·前端开发·linear-gradient·前端特效·下划线样式·文字特效
泷羽Sec-静安16 小时前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
一只学java的小汉堡18 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
九皇叔叔1 天前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途1 天前
HTML-CSS项目练习
前端·css·html
β添砖java1 天前
vivo响应式官网
前端·css·html·1024程序员节
渲吧云渲染1 天前
SaaS模式重构工业软件竞争规则,助力中小企业快速实现数字化转型
大数据·人工智能·sass