AndroidRemoteController/doc/SCSS_VS_CSS.md

SCSS vs 传统 CSS 功能对比

快速对比

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

---

1. 变量 (Variables)

传统 CSS

/* 需要重复写值 */
.header {
  color: #0769fb;
}
.button {
  color: #0769fb; /* 重复 */
}

SCSS

$primary-color: #0769fb;

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

---

2. 嵌套 (Nesting)

传统 CSS

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

SCSS

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

---

3. Mixin（混入）

传统 CSS

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

SCSS

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

带参数的 Mixin：

@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

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

SCSS

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

---

5. 函数 (Functions)

传统 CSS

/* 无法计算 */
.box {
  width: 100%; /* 无法动态计算 */
}

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

/* 不支持条件 */

SCSS

$theme: 'dark';

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

---

7. 循环 (Loops)

传统 CSS

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

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

/* 所有样式在一个文件，难以管理 */

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

/* 无法计算 */
.container {
  width: 100%; /* 无法做数学运算 */
}

SCSS

$base-size: 16px;
$spacing: 20px;

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

---

10. 父选择器引用 (&)

传统 CSS

.button {
  color: blue;
}
.button:hover {
  color: red; /* 需要重复写选择器 */
}

SCSS

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

---

实际项目示例

传统 CSS（44 行）

.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）

@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 使用。