From 9ead405340854b6e8baebf65353db007b20391b5 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 12 Aug 2025 15:06:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20css=E5=8F=98=E9=87=8F=E4=B8=8Escss?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/cssVariable/cssVariable.md | 181 ++++++++++++++++++++++
 src/views/demo/cssVariable/index.vue      |  57 +++++++
 2 files changed, 238 insertions(+)
 create mode 100644 src/views/demo/cssVariable/cssVariable.md
 create mode 100644 src/views/demo/cssVariable/index.vue

diff --git a/src/views/demo/cssVariable/cssVariable.md b/src/views/demo/cssVariable/cssVariable.md
new file mode 100644
index 0000000..a543725
--- /dev/null
+++ b/src/views/demo/cssVariable/cssVariable.md
@@ -0,0 +1,181 @@
+# CSS 变量的基本用法（css变量和scss变量两者没有任何关系！！！！）
+
+CSS 变量（也称为 CSS 自定义属性）是一种强大的工具，可以让你在整个样式表中重复使用值。以下是 CSS 变量的基本用法：
+
+## 1. 定义变量
+
+在 `:root` 选择器中定义全局变量（推荐）：
+
+```css
+:root {
+  --primary-color: #4285f4;
+  --default-padding: 15px;
+  --main-font-size: 16px;
+}
+```
+
+也可以在特定选择器中定义局部变量：
+
+```css
+.container {
+  --container-bg: #f1f1f1;
+}
+```
+
+## 2. 使用变量
+
+使用 `var()` 函数来调用变量：
+
+```css
+.button {
+  background-color: var(--primary-color);
+  padding: var(--default-padding);
+  font-size: var(--main-font-size);
+}
+
+.container {
+  background-color: var(--container-bg);
+}
+```
+
+## 3. 变量回退值
+
+如果变量未定义，可以提供一个回退值：
+
+```css
+.element {
+  color: var(--undefined-var, #333); /* 如果 --undefined-var 不存在，使用 #333 */
+}
+```
+
+## 4. 在 JavaScript 中操作 CSS 变量
+
+```javascript
+// 获取变量值
+const root = document.documentElement;
+const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');
+
+// 修改变量值
+root.style.setProperty('--primary-color', '#ff0000');
+```
+
+## 5. 变量计算
+
+可以在 `calc()` 中使用变量：
+
+```css
+:root {
+  --base-size: 10px;
+}
+
+.element {
+  margin: calc(var(--base-size) * 2);
+}
+```
+
+## 6. 变量作用域
+
+- 定义在 `:root` 中的变量是全局的
+- 定义在特定选择器中的变量只在该选择器及其子元素中可用
+
+## 7. 媒体查询中的变量
+
+可以根据不同屏幕尺寸修改变量值：
+
+```css
+:root {
+  --font-size: 16px;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --font-size: 14px;
+  }
+}
+```
+
+## 优点
+
+1. 提高可维护性：只需修改一处变量值即可全局更新
+2. 增强可读性：通过有意义的变量名代替硬编码值
+3. 支持动态主题切换
+4. 减少重复代码
+
+CSS 变量在现代浏览器中得到了广泛支持（IE11 除外），是构建可维护样式系统的强大工具。
+
+# CSS 变量与 SCSS/Sass 变量的关系
+
+- 核心结论（一句话总结）
+- CSS 变量和 SCSS 变量没有直接关系，它们是“不同层级”的变量：
+- SCSS 变量 是 编译时变量（预处理器阶段处理）
+- CSS 变量 是 运行时变量（浏览器实时生效）   
+
+> CSS 变量（自定义属性）和 SCSS/Sass 变量虽然都用于存储值，但它们是不同的概念，有以下关键区别：
+## 1. 本质不同
+
+- **CSS 变量**：是浏览器原生支持的 CSS 功能（CSS Custom Properties）
+- **SCSS/Sass 变量**：是预处理器功能，在编译阶段被替换为实际值
+
+## 2. 语法差异
+
+```scss
+/* SCSS 变量 */
+$primary-color: #4285f4;
+
+/* CSS 变量 */
+:root {
+  --primary-color: #4285f4;
+}
+```
+
+## 3. 作用时机
+
+- **SCSS 变量**：在代码编译阶段就被替换为实际值，浏览器看不到变量本身
+- **CSS 变量**：会保留在最终的 CSS 中，浏览器在运行时处理
+
+## 4. 作用域
+
+- **SCSS 变量**：有文件作用域，需要 @import 或 @use 来共享
+- **CSS 变量**：遵循 CSS 级联规则，可以继承和覆盖
+
+## 5. 动态性
+
+- **SCSS 变量**：编译后固定不变
+- **CSS 变量**：可以在运行时通过 JavaScript 动态修改
+
+## 6. 使用场景
+
+| 特性 | SCSS 变量 | CSS 变量 |
+|------|----------|----------|
+| 编译时替换 | ✓ | ✗ |
+| 运行时修改 | ✗ | ✓ |
+| 支持媒体查询 | ✗ | ✓ |
+| 支持 JavaScript 操作 | ✗ | ✓ |
+| 支持 calc() 计算 | ✗ | ✓ |
+
+## 7. 可以一起使用吗？
+
+可以！它们是互补的技术：
+
+```scss
+// SCSS 变量用于预处理
+$base-size: 10px;
+
+:root {
+  // 将 SCSS 变量转换为 CSS 变量
+  --base-size: #{$base-size};
+}
+
+.element {
+  // 使用 CSS 变量
+  padding: calc(var(--base-size) * 2);
+}
+```
+
+## 总结
+
+虽然名称相似，但 CSS 变量和 SCSS/Sass 变量服务于不同的目的：
+- **SCSS 变量**：主要用于预处理阶段的代码组织和维护
+- **CSS 变量**：用于运行时的动态样式控制和主题切换
+
+现代前端开发中，通常会同时使用这两种技术，各自发挥优势。
\ No newline at end of file
diff --git a/src/views/demo/cssVariable/index.vue b/src/views/demo/cssVariable/index.vue
new file mode 100644
index 0000000..8d67596
--- /dev/null
+++ b/src/views/demo/cssVariable/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <div id="container">
+        <div></div>
+    </div>
+    <div
+        class="markdown-body"
+        v-html="htmlStr"
+    />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { marked } from 'marked';
+import { getMarkdownContent } from '@/utils/tools';
+
+const htmlStr = ref('');
+
+getMarkdownContent('./md/cssVariable.md').then((res) => {
+    htmlStr.value = marked(res);
+});
+
+onMounted(() => {
+    const container = document.querySelector('#container');
+    container.style.setProperty('--w', container.clientWidth + 'px');
+});
+</script>
+
+<style scoped>
+#container {
+    width: 80%;
+    height: 200px;
+    border: 1px solid #333;
+    margin: 0 auto;
+    background: #fff;
+}
+
+#container div {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    border-radius: 50%;
+    margin-top: 50px;
+    animation: move 3s linear infinite;
+}
+
+@keyframes move {
+    0% {
+        transform: translate(0, 0);
+    }
+    50% {
+        transform: translate(calc(var(--w) - 100%), 0);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+</style>