用 Stylus 写 CSS 有多爽？从响应式面板案例看透它的优雅

作为前端开发者，你是否也曾被 CSS 的冗余语法、重复代码折磨过？写一个嵌套结构要反复敲选择器，改一个样式要全局搜半天？今天要聊的 Stylus，可能会让你重新爱上写样式 ------ 它用极简的语法、强大的编程特性，把 CSS 变成了一门 "可编写" 的语言。

本文不会空谈理论，而是通过一个「响应式图片面板」案例，带你沉浸式体验 Stylus 的优雅：从安装到实战，从布局到交互，看完就能上手。

一、初识 Stylus：比 CSS 更懂开发者的预处理器

Stylus 是三大 CSS 预处理器（Sass、Less、Stylus）中最 "叛逆" 的一个 ------ 它彻底抛弃了 CSS 的冗余语法，括号、分号、冒号都成了 "可选品"。这种极简主义，让写样式变得像写伪代码一样流畅。

1. 先装起来，跑通流程

全局安装 Stylus（需要 Node 环境）：

bash

css 复制代码

npm i -g stylus

新建style.styl文件，写完后编译成浏览器能识别的 CSS：

bash

bash 复制代码

# 单次编译：将style.styl编译为style.css
stylus style.styl -o style.css

# 实时编译：边写边更，开发必备
stylus style.styl -o style.css -w

2. 语法对比：Stylus vs 原生 CSS

同样一段样式，感受下差异：

原生 CSS：

css

css 复制代码

.card {
  width: 50px;
  height: 45px;
  background: #fff;
}
.card .title {
  font-size: 16px;
  color: #333;
}
.card.active {
  border: 1px solid #f00;
}

Stylus：

stylus

scss 复制代码

.card
  width 50px
  height 45px
  background #fff
  .title
    font-size 16px
    color #333
  &.active
    border 1px solid #f00

是不是瞬间清爽了？没有括号、分号，嵌套直接用缩进（像 Python 一样），&还能轻松表示父元素自身的状态 ------ 这只是 Stylus 的冰山一角。

二、实战：用 Stylus 实现响应式图片面板

我们要做的效果是：一个横向排列的图片面板，点击任意面板会展开放大，其他面板收缩；在手机端自动隐藏部分面板，适配小屏幕。

先看最终效果框架：

桌面端：5 个面板横向排列，点击展开
移动端（≤480px）：只显示前 3 个面板，占满屏幕宽度

1. HTML 结构：极简骨架

html

预览

xml 复制代码

<div class="container">
  <div class="panel active" style="background-image: url('图片1')">
    <h3>Explore The World</h3>
  </div>
  <div class="panel" style="background-image: url('图片2')">
    <h3>Wild Forest</h3>
  </div>
  <!-- 共5个面板，省略后3个 -->
</div>

2. JavaScript 交互：点击切换激活状态

用排他思想实现 "点击谁，谁放大"：

javascript

运行

dart 复制代码

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => {
  panel.addEventListener('click', () => {
    // 移除其他面板的active类
    document.querySelector('.active')?.classList.remove('active');
    // 给当前面板添加active类
    panel.classList.add('active');
  });
});

3. Stylus 样式：核心代码拆解

这部分是重点，我们一步步解析 Stylus 如何用更少的代码实现复杂布局和交互。

（1）基础重置与全局布局

stylus

scss 复制代码

*
  margin 0
  padding 0

body
  display flex
  flex-direction row
  justify-content center
  align-items center
  height 100vh
  overflow hidden

* 选择器重置默认边距，Stylus 中直接写*+ 缩进即可
display flex 替代display: flex;，少写冒号和分号
用100vh让 body 占满全屏，overflow hidden隐藏滚动条

（2）容器与面板布局：嵌套语法的妙用

stylus

scss 复制代码

.container
  display flex
  width 90vw  // 桌面端占视口90%宽度

  .panel
    height 80vh
    border-radius 50px
    color #fff
    cursor pointer
    flex 0.5  // 未激活时占比0.5
    margin 10px
    position relative
    background-size cover
    background-position center
    background-repeat no-repeat
    transition all 700ms ease-in  // 过渡动画：所有属性变化用700ms完成

    h3
      font-size 24px
      position absolute
      left 20px
      bottom 20px
      margin 0
      opacity 0  // 初始隐藏标题
      transition opacity 700ms ease-in 400ms  // 标题延迟400ms显示

    &.active  // 激活状态（&代表父元素.panel）
      flex 5  // 激活时占比5（挤压其他面板）
      h3
        opacity 1  // 显示标题

这段代码的优雅之处：

嵌套层级清晰 ：.container包含.panel，.panel包含h3，结构和 HTML 一一对应，不用反复写父选择器
& 符号的灵活使用 ：&.active直接表示.panel.active，比 CSS 中重复写.panel简洁太多
过渡动画简写 ：transition all 700ms ease-in 替代冗长的transition: all 700ms ease-in;

（3）响应式适配：媒体查询的极简写法

stylus

less 复制代码

@media (max-width 480px)
  .container
    width 100vw  // 移动端占满屏幕

  .panel:nth-of-type(4),
  .panel:nth-of-type(5)
    display none  // 隐藏第4、5个面板

对比原生 CSS 的媒体查询：

css

scss 复制代码

@media (max-width: 480px) {
  .container {
    width: 100vw;
  }
  .panel:nth-of-type(4), .panel:nth-of-type(5) {
    display: none;
  }
}

Stylus 直接省略了括号和分号，甚至连媒体查询的大括号都省了，缩进即层级 ------ 写响应式布局像写普通样式一样自然。

三、Stylus 的其他 "爽点"：不止于简洁

案例中用到的只是 Stylus 的基础功能，它真正强大的地方在于 "编程特性"：

1. 变量：一次定义，多处复用

stylus

scss 复制代码

// 定义主题变量
primary-color = #3498db
panel-height = 80vh
border-radius = 50px

// 使用变量
.panel
  height panel-height
  border-radius border-radius
  &.active
    border 2px solid primary-color

改样式时只需改变量，不用全局搜索替换，适合大型项目。

2. 混合（Mixins）：复用代码块

stylus

scss 复制代码

// 定义一个"弹性居中"的混合
flex-center()
  display flex
  justify-content center
  align-items center

// 复用混合
.container
  flex-center()  // 直接调用

.btn-group
  flex-center()  // 再次复用

减少重复代码，尤其适合封装常用布局模式（如清除浮动、响应式断点）。

3. 自动前缀：无需手动写 - webkit-

配合stylus-mixin等工具，Stylus 能自动为 CSS3 属性添加浏览器前缀：

stylus

css 复制代码

// 写一次
transform scale(1.1)

// 编译后自动生成
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);

四、为什么推荐用 Stylus？

从案例和特性来看，Stylus 的核心优势在于：

极简语法：少写 80% 的冗余符号，专注逻辑而非格式
嵌套清晰：HTML 结构和 CSS 样式一一对应，降低维护成本
编程能力：变量、混合、函数等特性，让 CSS 具备 "可复用、可扩展" 能力
无缝过渡：完全兼容 CSS 语法，不会 CSS 也能快速上手

五、最后：从案例到生产

本文的案例代码可以直接运行，你可以：

替换图片 URL 为自己的资源
调整flex值和transition时间改变动画效果
新增媒体查询断点适配更多设备

如果要在生产环境使用，建议结合构建工具（如 Webpack、Vite）配置 Stylus-loader，实现自动编译和压缩。

Stylus 不是银弹，但它绝对是提升 CSS 开发效率的 "利器"。如果你受够了写冗余的 CSS，不妨从这个响应式面板案例开始，感受 Stylus 带来的优雅 ------ 毕竟，谁不想用更少的代码，做更多的事呢？