SCSS、CSS 和 SASS 之间的联系与区别

接下来为大家详细解释 SCSS、CSS 和 SASS 之间的联系与区别。

三者关系

CSS 是基础的样式表语言，而 SASS 和 SCSS 都是 CSS 的预处理器，它们最终都会被编译成 CSS。

主要区别

1. CSS (Cascading Style Sheets)

本质：标准的网页样式表语言
语法：直接使用 .css 文件
特点：
- 浏览器原生支持，无需编译
- 语法简单直观
- 不支持变量、嵌套、混合等高级特性

css 复制代码

/* CSS 示例 */
.container {
  width: 1200px;
  margin: 0 auto;
}

.container .header {
  background-color: #333;
  color: white;
}

2. SASS (Syntactically Awesome Style Sheets)

出现时间：2006 年，是最早的 CSS 预处理器
文件扩展名 ：.sass
语法特点 ：
- 缩进语法 （Indent Syntax），不使用大括号 {} 和分号 ;
- 使用严格的缩进和换行来区分代码块
- 语法更简洁，但学习成本稍高

sass 复制代码

// SASS 示例（注意没有 {} 和 ;）
$primary-color: #333

.container
  width: 1200px
  margin: 0 auto
  
  .header
    background-color: $primary-color
    color: white

3. SCSS (Sassy CSS)

出现时间：2010 年，是 SASS 的升级版
文件扩展名 ：.scss
语法特点 ：
- 类 CSS 语法 ，使用大括号 {} 和分号 ;
- 完全兼容 CSS 语法
- 更易学习和迁移

scss 复制代码

// SCSS 示例
$primary-color: #333;

.container {
  width: 1200px;
  margin: 0 auto;
  
  .header {
    background-color: $primary-color;
    color: white;
  }
}

核心联系

同属一个阵营：SASS 和 SCSS 都是 SASS 预处理器的两种不同语法格式
功能相同：两者支持的功能完全一样（变量、嵌套、混合、继承等）
可以混用 ：在同一个项目中可以同时使用 .sass 和 .scss 文件
最终输出：都会编译成标准 CSS

SASS/SCSS 的核心优势（相比 CSS）

scss 复制代码

// 1. 变量
$primary-color: #409EFF;
$font-stack: Helvetica, sans-serif;

// 2. 嵌套规则
.navbar {
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: $primary-color;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

// 3. 混合宏（Mixin）
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
}

// 4. 继承
%message-base {
  padding: 10px;
  border-radius: 4px;
}

.success {
  @extend %message-base;
  background-color: #67c23a;
}

// 5. 函数和计算
$base-size: 16px;
.double-size: ($base-size * 2);

实际项目建议

对于现代前端项目，建议：

✅ 推荐使用 SCSS：

语法更接近 CSS，易于上手
社区主流选择，资料更多
VS Code 等编辑器支持更好
从 CSS 迁移成本最低

❌ 不推荐使用 SASS（缩进语法）：

语法要求严格，容易出错
使用团队较少

在您的项目中使用 SCSS

如果想在当前项目中使用 SCSS，需要安装相应的预处理器：

bash 复制代码

npm install -D sass sass-loader

然后在组件中就可以使用：

vue 复制代码

<style lang="scss" scoped>
$primary-color: #409EFF;

.container {
  .title {
    color: $primary-color;
  }
}
</style>

总结对比表

特性	CSS	SASS	SCSS
文件扩展名	`.css`	`.sass`	`.scss`
大括号 `{}`	必需	不需要	必需
分号 `;`	必需	不需要	必需
缩进敏感	否	是	否
变量支持	❌	✅	✅
嵌套支持	❌	✅	✅
混合宏	❌	✅	✅
学习曲线	低	中	低
流行度	100%	低	高