从基础到实战：Stylus 简化 CSS 开发全指南

Stylus 并非替代 CSS 的工具，而是一款CSS 预处理器。它通过扩展语法特性，解决传统 CSS 开发中的痛点，让样式编写更高效、更简洁，最终会编译为浏览器可识别的普通 CSS。

一、Stylus 的核心定位：CSS 的 "增强工具"

传统 CSS 存在重复代码多、逻辑弱、结构混乱等问题，Stylus 则针对性解决这些痛点，核心价值体现在三点：

减少重复代码：支持变量、混合（Mixin）等功能，避免反复书写相同样式，比如全局颜色、字体可统一管理。
提升代码逻辑性：提供条件判断、循环等编程特性，复杂样式编写更有条理，告别 "堆砌式" CSS。
优化代码结构：支持嵌套语法，可直观映射 HTML 层级结构，降低后期维护成本。

二、Stylus 关键特性：用编程思维写样式

Stylus 的特性彻底改变了样式开发思路，让 "写 CSS" 升级为 "管理样式"，核心特性如下：

1. 极简语法：告别冗余符号

无需写分号（;）、冒号（:）和大括号（{}），仅通过缩进划分代码层级，代码更轻盈。示例：

stylus

css 复制代码

// Stylus 写法（简洁）
body
  display flex
  height 100vh

// 对比普通 CSS（冗余符号多）
body {
  display: flex;
  height: 100vh;
}

2. 强大变量系统：全局统一管理

用 = 定义变量，支持数值运算，一处修改即可全局生效，适合管理颜色、尺寸等通用值。示例：

stylus

arduino 复制代码

// 定义变量
mainColor = #2c3e50
panelHeight = 80vh

// 使用变量
.panel
  background mainColor
  height panelHeight

3. 嵌套功能：映射 HTML 结构

选择器可直接嵌套，父选择器无需重复书写，结构与 HTML 一一对应，可读性更强。示例（对应 HTML 中 .container 下的 .panel）：

stylus

scss 复制代码

.container
  width 90vw
  // 嵌套子选择器
  .panel
    border-radius 50px
    margin 10px

4. Mixin 与函数：样式复用更灵活

将常用样式封装为 "Mixin"（类似函数），支持传递参数，还能自定义函数处理逻辑，复用性拉满。示例（带参数的 Mixin）：

stylus

scss 复制代码

// 定义带参数的 Mixin（圆角+阴影）
setCard(rad, shadow)
  border-radius rad
  box-shadow shadow

// 调用 Mixin
.panel
  setCard(50px, 0 4px 8px rgba(0,0,0,0.2))

5. 动态特性：支持逻辑控制

可写条件判断（if/else）、循环（for）等逻辑，根据场景动态生成样式，比如不同屏幕下的样式切换。

6. 无缝兼容 CSS

若暂时不熟悉 Stylus 语法，可直接在 Stylus 文件中写标准 CSS 代码，学习成本低，过渡更平滑。

三、实战上手：Stylus 开发响应式面板

下面通过 "响应式图片面板" 案例，演示 Stylus 的实际使用，从环境搭建到代码编写一步到位。

1. 准备工作：安装 Stylus

Stylus 需通过 npm 全局安装，步骤如下：

右键项目文件夹，打开终端；
输入安装命令，等待完成：

bash

运行

css 复制代码

npm i -g stylus

安装完成后，即可通过命令将 .styl 文件编译为 .css 文件（支持实时编译，边写边看效果）。

2. 项目文件结构

本次案例包含 3 个核心文件，结构如下：

plaintext

复制代码

项目文件夹/
├─ index.html （页面结构）
├─ style.styl （Stylus 样式文件）
└─ common.js （交互逻辑，本文不展开）

3. 核心代码实现

（1）HTML 结构（index.html）

定义 5 个图片面板，通过 style 属性设置背景图，引入编译后的 style.css：

html

预览

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylus 响应式面板</title>
    <!-- 引入编译后的 CSS 文件 -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <!-- 5个图片面板 -->
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Explore The World</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Wild Forest</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
            <h3>Sunny Beach</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
            <h3>City on Winter</h3>
        </div>
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Mountains - Clouds</h3>
        </div>
    </div>
    <script src="./common.js"></script>
</body>
</html>

（2）Stylus 样式（style.styl）

用 Stylus 实现 "弹性布局居中""面板交互""响应式适配"，代码如下（注意缩进和极简语法）：

stylus

scss 复制代码

// 1. 重置默认样式
*
    margin 0
    padding 0

// 2.  body 布局：全屏居中
body
    display flex
    flex-direction row
    justify-content center  // 主轴（水平）居中
    align-items center      // 交叉轴（垂直）居中
    height 100vh            // 占满视口高度
    overflow hidden         // 隐藏溢出内容

// 3. 容器与面板样式
.container
    display flex
    width 90vw  // 容器宽度占视口 90%
    // 面板样式（嵌套）
    .panel
        height 80vh
        border-radius 50px
        color #fff  // 文字白色
        cursor pointer  // 鼠标悬浮变指针
        flex 0.5  // 初始伸缩比例（小尺寸）
        margin 10px
        position relative  // 用于定位标题
        // 背景图设置
        background-size cover
        background-position center
        background-repeat no-repeat
        transition all 700ms ease-in  // 过渡动画
        // 面板标题（嵌套）
        h3
            font-size 24px
            position absolute
            left 20px
            bottom 20px
            margin 0
            opacity 0  // 初始隐藏标题
            transition opacity 300ms ease-in 400ms  // 延迟显示标题
        // 激活状态（& 代表父选择器 .panel）
        &.active
            flex 5  // 激活后宽度放大
            h3
                opacity 1  // 显示标题

// 4. 响应式适配（小屏幕 ≤ 480px）
@media (max-width: 480px)
    .container
        width 100vw  // 小屏容器占满视口
    // 隐藏第 4、5 个面板（避免拥挤）
    .panel:nth-of-type(4),
    .panel:nth-of-type(5)
        display none

四、关键知识点补充

1. 弹性布局核心：实现元素居中

案例中用弹性布局让 .container 在页面中居中，核心代码作用如下：

stylus

scss 复制代码

body
    display flex          // 父容器设为弹性布局
    justify-content center // 子元素（.container）水平居中
    align-items center     // 子元素（.container）垂直居中
    height 100vh           // 父容器高度占满视口（否则无法垂直居中）

弹性布局的优势在于：子元素自动成为 "弹性项"，可通过 justify-content/align-items 轻松控制对齐，支持动态调整，适配不同屏幕。

2. @media 与 @keyframes 的区别

很多人会混淆 @media（媒体查询）和 @keyframes（关键帧动画），两者用途完全不同：

特性	@media（媒体查询）	@keyframes（关键帧动画）
核心功能	实现响应式，根据设备特性切换样式	定义动画关键状态，让元素动起来
使用场景	解决 "不同设备怎么显示"（如小屏适配）	解决 "元素怎么动"（如缩放、变色）
语法逻辑	用条件判断（如 `max-width: 480px`）触发样式	用百分比（如 `0%`/`100%`）定义动画阶段

简单说：@media 管 "适配"，@keyframes 管 "动画"。

五、总结

Stylus 以 "极简语法" 和 "编程特性" 为核心，让 CSS 开发从 "繁琐重复" 变为 "高效可控"。通过本次案例，你可以掌握 Stylus 的基础语法、嵌套、响应式适配，以及弹性布局的核心用法。后续可尝试用 Mixin、变量等特性优化代码，进一步提升开发效率。