docs: 重构 README 附录展示 & 新增多个附录交互组件
README 更新: - 移除顶部 header.png 横幅图片 - 新增「附录知识库」板块，以 3×3 网格展示 9 大知识领域精选内容 - 附录链接指向部署版网站 (datawhalechina.github.io) - 阶段表格新增「附录」行，突出 80+ 交互式专题 - 章节标题「新手入门 & PM」简化为「零基础入门」 - News 新增 2026-02-25 附录知识库更新条目 新增交互组件: - 异步任务队列 (async-task-queues) 演示组件 - 文件存储 (file-storage) 演示组件 - 项目架构 (project-architecture) 演示组件 - 限流与背压 (rate-limiting) 演示组件 - 搜索引擎 (search-engines) 演示组件 - 计算机基础: AppLaunch/BiosUefi/OSBoot 等启动流程演示组件 新增附录文档: - 前端项目架构 (frontend-project-architecture.md) - 后端项目架构 (backend-project-architecture.md) 内容优化: - 算法思维、数据结构、编程语言、调试艺术等多篇附录内容更新 - HTML/CSS 布局、请求旅程等前后端文档完善 - 附录索引页 (index.md) 同步更新
This commit is contained in:
sanbuphy
@@ -434,69 +434,365 @@ Flexbox 是现代 CSS 最常用的布局方式。它让元素自动排列对齐
|
||||
| `flex-wrap` | 是否换行 | `nowrap`、`wrap` |
|
||||
| `gap` | 元素间距 | `10px`、`1rem` |
|
||||
|
||||
### 3.7 SCSS：CSS 的"升级版"
|
||||
### 3.7 CSS 预处理器：SCSS/SASS 与 LESS
|
||||
|
||||
::: tip 🎯 真实场景
|
||||
|
||||
你写了一个项目，CSS 文件有 2000 行。后来要改主题色，你发现：
|
||||
|
||||
- 主色调 `#3b82f6` 出现了 50 次
|
||||
- 改一个颜色要全局搜索替换
|
||||
- 还要担心漏改了某个地方
|
||||
- 改一个颜色要全局搜索替换，还要担心漏改
|
||||
- 选择器写成 `.nav .nav-list .nav-item .nav-link` 又长又难维护
|
||||
|
||||
**SCSS 解决的问题**：变量、嵌套、混入、模块化
|
||||
**CSS 预处理器**就是来解决这些问题的。它让 CSS 也能"编程"：有变量、有嵌套、能复用代码。
|
||||
:::
|
||||
|
||||
**SCSS 示例**：
|
||||
#### 3.7.1 什么是 CSS 预处理器？
|
||||
|
||||
```scss
|
||||
// 1. 变量：定义主题色
|
||||
$primary-color: #3b82f6;
|
||||
**用人话解释**：预处理器是一种"更聪明的 CSS"。你用更强大的语法写样式，然后它帮你**编译**成普通 CSS，浏览器就能正常识别了。
|
||||
|
||||
// 2. 嵌套：父子关系一目了然
|
||||
.card {
|
||||
background: white;
|
||||
|
||||
h2 {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
```
|
||||
**为什么要用？**
|
||||
|
||||
**编译后变成普通 CSS**：
|
||||
| 痛点 | 原生 CSS | 预处理器 |
|
||||
|------|----------|----------|
|
||||
| 颜色重复出现 | 到处复制粘贴 | 定义变量，一处修改全局生效 |
|
||||
| 选择器层级太深 | 写成一长串 | 嵌套语法，层级一目了然 |
|
||||
| 相同样式重复写 | 复制粘贴 | 混入（Mixin），像函数一样复用 |
|
||||
|
||||
#### 3.7.2 三大预处理器对比
|
||||
|
||||
| 特性 | 原生 CSS | **SCSS/SASS** | **LESS** |
|
||||
|------|----------|---------------|----------|
|
||||
| **变量写法** | `--primary` | `$primary` | `@primary` |
|
||||
| **嵌套语法** | ❌ 不支持 | ✅ 支持 | ✅ 支持 |
|
||||
| **混入（复用代码）** | ❌ 不支持 | ✅ `@mixin` | ✅ `.mixin()` |
|
||||
| **学习难度** | 简单 | 中等 | 中等 |
|
||||
| **流行程度** | - | ⭐⭐⭐ 最流行 | ⭐⭐ 较流行 |
|
||||
|
||||
**简单记忆**：
|
||||
- **SCSS**：用 `$` 符号，Bootstrap 5 在用，生态最好
|
||||
- **LESS**：用 `@` 符号，和 CSS 的 `@media` 写法一致，容易上手
|
||||
|
||||
#### 3.7.3 核心功能对比示例
|
||||
|
||||
##### 1. 变量：一处修改，全局生效
|
||||
|
||||
**场景**：主题色 `#3b82f6` 在 20 个地方用到，要改成红色。
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="原生 CSS">
|
||||
|
||||
```css
|
||||
.card {
|
||||
background: white;
|
||||
}
|
||||
.card h2 {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
/* 要改 20 处，容易漏 */
|
||||
.button { background: #3b82f6; }
|
||||
.link { color: #3b82f6; }
|
||||
.border { border-color: #3b82f6; }
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="SCSS">
|
||||
|
||||
```scss
|
||||
$primary: #3b82f6;
|
||||
|
||||
.button { background: $primary; }
|
||||
.link { color: $primary; }
|
||||
.border { border-color: $primary; }
|
||||
/* 改 $primary 一处即可 */
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="LESS">
|
||||
|
||||
```less
|
||||
@primary: #3b82f6;
|
||||
|
||||
.button { background: @primary; }
|
||||
.link { color: @primary; }
|
||||
.border { border-color: @primary; }
|
||||
/* 改 @primary 一处即可 */
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
##### 2. 嵌套：层级关系一目了然
|
||||
|
||||
**场景**：导航栏里有多层结构。
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="原生 CSS">
|
||||
|
||||
```css
|
||||
/* 写成一长串，难看出层级关系 */
|
||||
.navbar .nav-list .nav-item .nav-link { }
|
||||
.navbar .nav-list .nav-item .nav-link:hover { }
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="SCSS">
|
||||
|
||||
```scss
|
||||
.navbar {
|
||||
.nav-list {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:hover { } /* & 表示父选择器 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**SCSS vs Less vs 原生 CSS**：
|
||||
</TabItem>
|
||||
<TabItem label="LESS">
|
||||
|
||||
| 特性 | 原生 CSS | SCSS | Less |
|
||||
|------|----------|------|------|
|
||||
| 变量 | ✅ `--var` | ✅ `$var` | ✅ `@var` |
|
||||
| 嵌套 | ❌ | ✅ | ✅ |
|
||||
| 混入 | ❌ | ✅ `@mixin` | ✅ `.mixin()` |
|
||||
| 学习曲线 | 简单 | 中等 | 中等 |
|
||||
```less
|
||||
.navbar {
|
||||
.nav-list {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&:hover { }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
##### 3. 混入（Mixin）：复用代码片段
|
||||
|
||||
**场景**：多个按钮都需要"居中显示"的样式。
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="原生 CSS">
|
||||
|
||||
```css
|
||||
/* 复制粘贴 3 次 */
|
||||
.btn-primary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-secondary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="SCSS">
|
||||
|
||||
```scss
|
||||
@mixin center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary { @include center; }
|
||||
.btn-secondary { @include center; }
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="LESS">
|
||||
|
||||
```less
|
||||
.center() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary { .center(); }
|
||||
.btn-secondary { .center(); }
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
#### 3.7.4 如何选择？
|
||||
|
||||
| 情况 | 推荐选择 |
|
||||
|------|----------|
|
||||
| 刚开始学，项目小 | **原生 CSS**（先打好基础） |
|
||||
| 项目用 Bootstrap 5 | **SCSS**（Bootstrap 源码是 SCSS） |
|
||||
| 团队熟悉 `@` 符号 | **LESS**（和 CSS 的 `@media` 写法一致） |
|
||||
| 需要复杂逻辑（循环、条件） | **SCSS**（功能更强大） |
|
||||
|
||||
#### 3.7.5 在项目中使用
|
||||
|
||||
**Vite 项目（最简单）**：
|
||||
|
||||
```bash
|
||||
# 安装 sass
|
||||
npm install -D sass
|
||||
|
||||
# 直接使用 .scss 或 .less 文件
|
||||
```
|
||||
|
||||
::: tip 💡 新手建议
|
||||
|
||||
1. **先学好原生 CSS**：预处理器只是"语法糖"，本质还是 CSS
|
||||
2. **项目大了再用 SCSS**：小项目直接写 CSS 更简单
|
||||
3. **现代 CSS 已经支持变量**：`--primary-color: #3b82f6;` 原生就能用
|
||||
1. **先学好原生 CSS**：预处理器只是"语法糖"，不懂 CSS 基础会越用越乱
|
||||
2. **小项目不用强上**：CSS 不到 200 行，直接写 CSS 更简单
|
||||
3. **从 SCSS 开始**：语法和 CSS 几乎一样，只是多了 `$` 变量
|
||||
4. **不要嵌套太深**：超过 3 层会让代码难维护
|
||||
:::
|
||||
|
||||
#### 3.7.6 不同技术栈的文件组织对比
|
||||
|
||||
**同样的项目，用不同技术栈，文件结构有什么不同？**
|
||||
|
||||
<Tabs>
|
||||
<TabItem label="原生 HTML + CSS">
|
||||
|
||||
```
|
||||
my-website/
|
||||
├── index.html # 页面结构
|
||||
├── about.html
|
||||
├── css/
|
||||
│ ├── reset.css # 重置样式
|
||||
│ ├── layout.css # 布局样式
|
||||
│ ├── components.css # 组件样式
|
||||
│ └── style.css # 主样式（可能上千行）
|
||||
├── js/
|
||||
│ └── main.js
|
||||
└── images/
|
||||
└── logo.png
|
||||
```
|
||||
|
||||
**特点**：
|
||||
- CSS 集中在一个或几个文件
|
||||
- 改样式要来回切换 HTML 和 CSS 文件
|
||||
- 样式容易互相冲突
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="Vue + 原生 CSS">
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # 组件文件夹
|
||||
│ ├── Button/
|
||||
│ │ ├── Button.vue # 模板 + 样式 + 逻辑
|
||||
│ │ └── Button.test.js
|
||||
│ ├── Header/
|
||||
│ │ └── Header.vue
|
||||
│ └── Footer/
|
||||
│ └── Footer.vue
|
||||
├── views/ # 页面文件夹
|
||||
│ ├── Home.vue
|
||||
│ └── About.vue
|
||||
├── App.vue # 根组件
|
||||
└── main.js # 入口文件
|
||||
```
|
||||
|
||||
**Button.vue 内部结构**：
|
||||
```vue
|
||||
<template>
|
||||
<button class="btn">点击</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default { name: 'Button' }
|
||||
</script>
|
||||
|
||||
<style scoped> <!-- scoped 样式只影响当前组件 -->
|
||||
.btn { background: #3b82f6; }
|
||||
</style>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="Vue + SCSS">
|
||||
|
||||
```
|
||||
src/
|
||||
├── assets/
|
||||
│ └── styles/
|
||||
│ ├── _variables.scss # 变量：颜色、间距等
|
||||
│ ├── _mixins.scss # 混入：复用代码块
|
||||
│ ├── _functions.scss # 函数：颜色计算等
|
||||
│ └── global.scss # 全局样式入口
|
||||
├── components/
|
||||
│ ├── Button/
|
||||
│ │ └── Button.vue # 组件内用 @import 引入变量
|
||||
│ └── Card/
|
||||
│ └── Card.vue
|
||||
├── views/
|
||||
│ ├── Home.vue
|
||||
│ └── About.vue
|
||||
├── App.vue
|
||||
└── main.js
|
||||
```
|
||||
|
||||
**_variables.scss**：
|
||||
```scss
|
||||
$primary: #3b82f6;
|
||||
$secondary: #64748b;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
```
|
||||
|
||||
**Button.vue**：
|
||||
```vue
|
||||
<style scoped lang="scss">
|
||||
@import '@/assets/styles/variables';
|
||||
|
||||
.btn {
|
||||
background: $primary; // 使用变量
|
||||
padding: $spacing-md;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem label="Vue + Tailwind CSS">
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/
|
||||
│ ├── Button.vue # 不需要 style 块
|
||||
│ ├── Card.vue
|
||||
│ └── Header.vue
|
||||
├── views/
|
||||
│ ├── Home.vue
|
||||
│ └── About.vue
|
||||
├── App.vue
|
||||
└── main.js
|
||||
|
||||
# 配置文件（根目录）
|
||||
tailwind.config.js # 主题配置
|
||||
tailwind.css # 基础样式入口
|
||||
```
|
||||
|
||||
**Button.vue**（没有 style 块）：
|
||||
```vue
|
||||
<template>
|
||||
<button class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded">
|
||||
点击
|
||||
</button>
|
||||
</template>
|
||||
```
|
||||
|
||||
**特点**：
|
||||
- 没有单独的样式文件
|
||||
- 类名就是样式（`bg-blue-500` = 蓝色背景）
|
||||
- 配置集中在 `tailwind.config.js`
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
**核心区别总结**：
|
||||
|
||||
| 技术栈 | 样式文件位置 | 主题管理 | 代码复用 |
|
||||
|--------|-------------|----------|----------|
|
||||
| 原生 HTML+CSS | 集中式 `css/` 文件夹 | 搜索替换 | 复制粘贴 |
|
||||
| Vue + CSS | 分散在 `.vue` 组件内 | 搜索替换 | 复制粘贴 |
|
||||
| Vue + SCSS | 组件内 + `styles/` 公共文件 | 变量统一管理 | 混入复用 |
|
||||
| Vue + Tailwind | 无（类名里） | `tailwind.config.js` | 类名组合 |
|
||||
|
||||
### 3.8 如何记住这么多 CSS 属性？
|
||||
|
||||
::: tip 🎯 新手困惑
|
||||
|
||||
Reference in New Issue
Block a user