# SCSS vs 传统 CSS 功能对比

## 快速对比

| 功能 | 传统 CSS | SCSS |
|------|---------|------|
| 语法 | 标准 CSS 语法 | ✅ 完全兼容 CSS 语法 |
| 变量 | ❌ 不支持（CSS 变量有限） | ✅ `$variable` |
| 嵌套 | ❌ 不支持 | ✅ 支持嵌套 |
| Mixin | ❌ 不支持 | ✅ `@mixin` / `@include` |
| 继承 | ❌ 不支持 | ✅ `@extend` |
| 函数 | ❌ 不支持 | ✅ 内置函数 + 自定义函数 |
| 条件语句 | ❌ 不支持 | ✅ `@if` / `@else` |
| 循环 | ❌ 不支持 | ✅ `@for` / `@each` / `@while` |
| 导入 | ✅ `@import` | ✅ `@use` / `@import` |
| 模块化 | ⚠️ 有限 | ✅ 完整的模块系统 |

---

## 1. 变量 (Variables)

### 传统 CSS
```css
/* 需要重复写值 */
.header {
  color: #0769fb;
}
.button {
  color: #0769fb; /* 重复 */
}
```

### SCSS
```scss
$primary-color: #0769fb;

.header {
  color: $primary-color;
}
.button {
  color: $primary-color; // 使用变量
}
```

---

## 2. 嵌套 (Nesting)

### 传统 CSS
```css
.nav {
  background: #fff;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  display: inline;
}
.nav ul li a {
  color: #000;
}
```

### SCSS
```scss
.nav {
  background: #fff;
  ul {
    list-style: none;
    li {
      display: inline;
      a {
        color: #000;
      }
    }
  }
}
```

---

## 3. Mixin（混入）

### 传统 CSS
```css
/* 需要重复写相同的代码 */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  display: flex;
  align-items: center;
  justify-content: center; /* 重复 */
}
```

### SCSS
```scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  @include flex-center;
}
.card {
  @include flex-center; // 复用
}
```

**带参数的 Mixin：**
```scss
@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
}

.primary-button {
  @include button(#0769fb, #fff);
}
```

---

## 4. 继承 (Extend)

### 传统 CSS
```css
/* 需要重复写 */
.error {
  border: 1px solid red;
  color: red;
}
.serious-error {
  border: 1px solid red; /* 重复 */
  color: red; /* 重复 */
  font-weight: bold;
}
```

### SCSS
```scss
.error {
  border: 1px solid red;
  color: red;
}
.serious-error {
  @extend .error; // 继承所有样式
  font-weight: bold;
}
```

---

## 5. 函数 (Functions)

### 传统 CSS
```css
/* 无法计算 */
.box {
  width: 100%; /* 无法动态计算 */
}
```

### SCSS
```scss
// 内置函数
.box {
  width: percentage(2/3); // 66.66667%
  background: darken(#0769fb, 10%); // 颜色变暗
  padding: round(3.7px); // 4px
}

// 自定义函数
@function double($value) {
  @return $value * 2;
}

.container {
  width: double(50px); // 100px
}
```

---

## 6. 条件语句 (Conditionals)

### 传统 CSS
```css
/* 不支持条件 */
```

### SCSS
```scss
$theme: 'dark';

.button {
  @if $theme == 'dark' {
    background-color: #000;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #000;
  }
}
```

---

## 7. 循环 (Loops)

### 传统 CSS
```css
/* 需要手动写 */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
/* ... 重复写 12 次 */
```

### SCSS
```scss
// @for 循环
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

// @each 循环
$colors: red, blue, green;
@each $color in $colors {
  .bg-#{$color} {
    background-color: $color;
  }
}
```

---

## 8. 模块化 (Modularity)

### 传统 CSS
```css
/* 所有样式在一个文件，难以管理 */
```

### SCSS
```scss
// _variables.scss (变量文件)
$primary-color: #0769fb;

// _mixins.scss (混入文件)
@mixin flex-center { ... }

// main.scss (主文件)
@use 'variables' as *;
@use 'mixins' as *;

.button {
  color: $primary-color;
  @include flex-center;
}
```

---

## 9. 运算 (Operations)

### 传统 CSS
```css
/* 无法计算 */
.container {
  width: 100%; /* 无法做数学运算 */
}
```

### SCSS
```scss
$base-size: 16px;
$spacing: 20px;

.container {
  width: 100% - $spacing; // 计算
  font-size: $base-size * 1.5; // 24px
  padding: $spacing / 2; // 10px
}
```

---

## 10. 父选择器引用 (&)

### 传统 CSS
```css
.button {
  color: blue;
}
.button:hover {
  color: red; /* 需要重复写选择器 */
}
```

### SCSS
```scss
.button {
  color: blue;
  &:hover {
    color: red; // & 代表父选择器
  }
  &.active {
    background: yellow;
  }
}
```

---

## 实际项目示例

### 传统 CSS（44 行）
```css
.device-container {
  width: 100%;
  height: 100%;
  background-color: #0769fb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.device-update {
  width: 100%;
  height: 100%;
  background-color: #0769fb;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ... 重复代码 ... */
```

### SCSS（更简洁，使用变量和 mixin）
```scss
@use '../../styles/variables' as *;

.device-container {
  width: $full-size;
  height: $full-size;
  background-color: $primary-color;
  @include flex-center;
  margin: 0;
  padding: 0;
}

.device-update {
  @extend .device-container; // 继承所有样式
}
```

---

## 总结

**SCSS 的优势：**
- ✅ 语法完全兼容 CSS（可以直接写 CSS）
- ✅ 变量：避免重复值
- ✅ 嵌套：结构更清晰
- ✅ Mixin：代码复用
- ✅ 函数：动态计算
- ✅ 逻辑：条件、循环
- ✅ 模块化：更好的组织

**传统 CSS：**
- ✅ 浏览器原生支持
- ✅ 无需编译
- ❌ 功能有限
- ❌ 代码重复多
- ❌ 难以维护大型项目

**推荐：** 使用 SCSS 编写，编译为 CSS 使用。