css 和scss

.scss 和 .css 这两种样式文件的核心区别，我会从语法、功能、使用方式三个维度讲清楚，让你能快速区分并知道该怎么用。

一、核心定义

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

二、核心区别对比

特性	.css (原生 CSS)	.scss (Sass 的 SCSS 语法)
语法规则	纯原生语法，无变量、嵌套等扩展	兼容所有 CSS 语法 + 新增扩展语法（变量、嵌套、混合等）
浏览器支持	直接支持，无需编译	不支持，必须通过工具编译为.css
代码复用性	低（需手动复制、写公共类）	高（变量、混合器、继承、导入等）
代码结构	扁平结构，层级嵌套需重复写选择器	支持嵌套语法，结构更清晰
逻辑能力	无（仅支持简单的优先级、继承）	支持条件判断、循环、运算等简单逻辑

三、关键差异示例

1. 基础语法（CSS vs SCSS）

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

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

/* SCSS 嵌套语法，和HTML层级对应 */
.container {
  width: 1200px;
  margin: 0 auto;
  
  // 嵌套子选择器
  .header {
    height: 60px;
    background: #fff;
    
    .logo {
      font-size: 20px;
      color: #333;
    }
  }
}

编译后会自动生成和上面 CSS 完全一致的代码。

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

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

scss

// 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> 直接写：

   vue

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

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

   • Vue 项目中，安装依赖：yarn add sass（Vite/Vue CLI 已内置编译能力）；

   • 在 Vue 组件中直接用： vue

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

   • 编译工具会自动将 .scss 转为 .css 供浏览器使用。

总结

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