🎉 从零开始！用 Stylus 编写 Local TAPAS 页面的保姆级教程（附代码）

🚀 为什么选 Stylus？

CSS 的"升级版"：Stylus 是 CSS 预处理器，让你用更少代码做更多事！
小白友好 ：语法简洁，支持变量、继承、缩进自动补全（告别手动写 padding: 0！）。
像魔法一样：Stylus 是 CSS 的魔法书，把复杂的代码变成简单的咒语 ✨

🛠️ 第一步：安装 Stylus

bash 复制代码

npm install -g stylus  # 全局安装，像装了一个 CSS 巫师！🧙♂️  
stylus --version       # 检查版本，确认巫师已就位 ✨

小贴士 ：如果安装失败，请确保 Node.js 和 npm 已正确安装。安装成功后，你会看到类似 0.64.0 的输出！

🎨 第二步：Stylus 基础语法大揭秘

1. 变量魔法 🪄

styl 复制代码

$background_color = rgba(255, 255, 255, 0.95)  // 定义变量，像给颜色起小名 😄  
html  
    background $background_color  // 直接调用变量，省心！

类比：变量就像魔法书里的咒语，写一次就能用 N 次！

2. 继承与缩进 🔄

styl 复制代码

body  
    color skyblue  // 子元素自动继承，省去重复写 `color: skyblue`！  

p  
    font-size 16px  
    color inherit  // 继承父元素颜色，像复制粘贴快捷键 Ctrl+C/V

注意：Stylus 用缩进代替大括号 {}，缩进错误会导致编译失败！

3. 背景图的"裁剪哲学" 🖼️

styl 复制代码

html  
    background-size cover  // 图片填满盒子，像给盒子贴满壁纸 🖼️  
    // background-size contain  // 图片完整显示，像给盒子装裱画框 🖼️

思考题 ：猜猜 background-size: contain 会怎么显示？答案在实战部分揭晓！

4. CSS 模块化与作用域 🧱

styl 复制代码

.add-items  
    input  
        padding 10px  // 输入框圆润可爱，像胖乎乎的小猪 🐷

技巧：用 Tab 缩进自动补全 CSS 前缀，告别手写 & 符号！

🧪 第三步：Local TAPAS 页面实战

1. HTML 结构（index.html）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="wrapper">
        <h2>Local TAPAS</h2>
        <p>请添加您的TAPAS</p>
        <ul class="plates">
            <li>Loading Tapas...</li>
        </ul>
        <form class="add-items">
            <input
            type="text"
            placeholder="Item Name"
            required
            name="item"
            >
            <script src="./common.js"></script>
            <input type="submit" value="+ Add Item">
        </form>
    </div>
</body>
</html>

小提示：表单默认会刷新页面，我们需要 JavaScript 来阻止这个行为！

2. JavaScript 功能（common.js）

js 复制代码

// 获取表单和列表元素
const addItems = document.querySelector('.add-items'); // 表单元素
const itemsList = document.querySelector('.plates');   // 列表元素
let items = []; // 存储待办事项的数组（相当于你的"待办事项清单"）

/**
 * 处理表单提交事件
 * @param {Event} e - 提交事件对象
 */
function addItem(e) {
    e.preventDefault(); // 拦截表单默认提交行为（防止页面刷新）
    
    // 获取输入框的值
    const text = this.querySelector('[name=item]').value.trim();
    
    // 如果输入为空，直接返回
    if (!text) return;
    
    // 创建新待办项对象
    const item = {
        text, // 任务名称
        done: false // 默认未完成
    };
    
    // 将新任务添加到数组
    items.push(item);
    
    // 更新列表显示
    populateList(items, itemsList);
    
    // 重置表单（清空输入框）
    this.reset();
}

/**
 * 动态生成列表内容
 * @param {Array} plates - 待办事项数组
 * @param {HTMLElement} platesList - 列表容器
 */
function populateList(plates = [], platesList) {
    // 将数组转换为 HTML 字符串
    platesList.innerHTML = plates.map((plate, i) => {
        return `
            <li>
                <label>
                    <!-- 复选框，点击可切换任务状态 -->
                    <input 
                        type="checkbox" 
                        data-index="${i}" 
                        ${plate.done ? 'checked' : ''} 
                    />
                    ${plate.text} <!-- 任务名称 -->
                </label>
            </li>
        `;
    }).join(''); // 将数组拼接成字符串
}

// 监听表单提交事件
addItems.addEventListener('submit', addItem);

重点解析：

e.preventDefault()：像一个"拦截小卫士"，阻止表单提交时页面刷新。
items.push(item)：将新任务添加到数组，相当于往"待办清单"里加新条目。
map()：像一个"翻译官"，把数组里的每个任务转换成 HTML 元素。
checked 属性 ：根据 done 状态决定复选框是否被勾选。

3.Stylus（common.styl）

styl 复制代码

$background_color = rgba(255, 255, 255, 0.95)

html
    box-sizing border-box
    min-height 100vh
    display flex
    justify-content center
    align-items center
    text-align center
    background url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat
    background-size cover

*
    box-sizing border-box

.wrapper
    padding 20px
    min-width 350px
    background $background_color
    box-shadow 0 0 0px 10px rgba(0, 0, 0, 0.1)
    h2
        text-align center
        margin 0
        font-weight 200

.plates
    margin 0
    padding 0
    text-align left
    list-style none
    li
        border-bottom 1px solid rgba(0, 0, 0, 0.2)
        padding 10px 0px
        display flex
    label
        flex 1
        cursor pointer
    input
        display none

.add-items
    margin-top 20px
    input
        padding 10px
        outline 0
        border 1px solid rgba(0, 0, 0, 0.1)


body
    color skyblue

🌟 第四步：移动端适配小技巧 📱

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

解释：

user-scalable=no：禁止用户缩放，像给页面上锁 🔒
viewport-fit=cover：确保安全区域适配（比如 iPhone 的刘海屏）

⚙️ 自动化编译：提升开发效率

1. 编译命令详解

bash 复制代码

stylus -w common.styl -o common.css

参数解释：

-w：监听模式 ，当 .styl 文件发生变化时，自动重新编译。
-o：输出目录 ，指定编译后的 .css 文件保存位置。

场景：开发时实时编译，告别手动执行命令！

🧾 结语：Stylus 让 CSS 变得有趣！

"Stylus 不是魔法，而是你写 CSS 的新姿势！" ------ 本小白导师 🤓

📦 附录：完整代码包

文件结构

复制代码

project/  
├── index.html  
├── common.styl  
├── common.css
└── common.js

编译命令

bash 复制代码

stylus common.styl -o css/  // 将 .styl 文件编译为 CSS

🚀 下一步挑战

尝试修改 background-size: contain，观察图片显示效果！
在 common.js 中添加删除按钮功能，挑战你的逻辑思维！

🎉 恭喜你完成 Stylus 入门！现在，去创造属于你的魔法 CSS 吧！ 🧙♂️✨