CSS与SCSS核心区别详解：语法、功能及在前端开发中的应用

在网页开发中，.css 和 .scss 是两种常见的样式文件格式。本文将从语法、功能和使用方式三个维度，详细解析它们的核心区别，帮助您快速区分并掌握如何在实际项目中选择和使用。

一、核心定义

• .css：层叠样式表（Cascading Style Sheets）的原生文件格式，是浏览器唯一能直接识别运行的样式语言，语法简单、无扩展，属于前端基础技术的重要组成部分。
• .scss：Sass（Syntactically Awesome Style Sheets）的一种语法格式（Sass 还有 .sass 缩进式语法），是 CSS 的超集——完全兼容 CSS 语法，同时新增了大量便捷功能，最终需要编译成 .css 才能被浏览器识别。

下图展示了两种文件格式的基本概念对比：

二、核心区别对比

三、关键差异示例

1. 基础语法（CSS vs SCSS）

CSS 文件（style.css） 只能用扁平写法，重复写选择器，代码冗余：

/* CSS 只能扁平书写，层级嵌套需重复写选择器 */
.container {
  width: 1200px;
  margin: 0 auto;
}
.container .header {
  height: 60px;
  background: #fff;
}
.container .header .logo {
  font-size: 20px;
  color: #333;
}

SCSS 文件（style.scss） 支持嵌套，结构和 HTML 一致，更易读：

/* SCSS 嵌套语法，和HTML层级对应 */
.container {
  width: 1200px;
  margin: 0 auto;

  // 嵌套子选择器
  .header {
    height: 60px;
    background: #fff;

    .logo {
      font-size: 20px;
      color: #333;
    }
  }
}

编译后会自动生成和上面 CSS 完全一致的代码。下图直观展示了语法差异：

2. 核心扩展功能（SCSS 独有）

SCSS 最核心的优势是新增了 CSS 没有的便捷功能，举几个高频用法：

// 1. 变量：统一管理样式值，修改时只需改一处
$primary-color: #409eff; // 定义变量
$base-font-size: 16px;

// 2. 混合器（Mixin）：复用代码块
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 3. 继承：复用已有样式
.base-btn {
  padding: 8px 16px;
  border-radius: 4px;
}
.primary-btn {
  @extend .base-btn; // 继承base-btn的样式
  background: $primary-color;
  color: #fff;
}

// 4. 运算：直接做数值/颜色计算
.box {
  width: 100px + 50px; // 编译后为150px
  color: $primary-color + #111; // 颜色运算
}

// 5. 导入：拆分样式文件，通过@import合并
@import './variables.scss'; // 导入变量文件
@import './common.scss';    // 导入公共样式

这些功能大幅提升了样式开发效率和可维护性。下图示意了扩展功能的应用：

四、使用方式

1. .css：直接在 HTML 中通过 <link> 引入，或在 Vue 组件中通过 <style> 直接写：

   <style>
   /* 直接写CSS */
   .box { color: red; }
   </style>

2. .scss：需要先配置编译工具（如 Vite、Webpack 或 CLI），再使用：

   • 在 Vue 项目中，安装依赖：yarn add sass（Vite/Vue CLI 已内置编译能力）；
   • 在 Vue 组件中直接使用：

     <style lang="scss" scoped>
     $color: red;
     .box { color: $color; }
     </style>

   • 编译工具会自动将 .scss 转为 .css 供浏览器使用。在 Vue 或 React 等前端框架项目中，这已成为标准实践。

总结

1. 本质区别：.css 是浏览器原生支持的静态样式文件，.scss 是增强型 CSS 预处理器文件，需编译后使用。
2. 核心优势：SCSS 的变量、嵌套、混合器等功能能大幅提升样式开发效率，减少冗余代码。
3. 使用场景：
   • 简单项目或小页面：直接用 .css 即可；
   • 中大型项目（如 Vue/React 项目）：优先用 .scss，以提升样式可维护性和团队协作效率。