你是不是也觉得写 CSS 像在搬砖？重复的选择器、繁琐的分号括号、改一处样式要找半天... 今天就给大家安利一个 "CSS 加速器"——Stylus，再结合弹性布局和过渡动画，手把手教你实现一个点击展开的动态图片面板。做完这个案例，保证你写 CSS 的速度和颜值都能上一个台阶！
先看效果：会 "呼吸" 的图片面板
先上最终效果动图（初始时 5 个图片面板并排，点击任意一个会快速展开占满大部分空间，标题优雅浮现；再点其他面板，当前面板收缩，新面板展开；手机上自动隐藏最后两个面板，适配小屏幕）。
这种交互在官网首页、相册展示场景超实用，而实现它的核心就是：Stylus 预处理 + 弹性布局 + 过渡动画。
为什么用 Stylus？比原生 CSS 快在哪？
在写这个案例前，先聊聊为什么放弃原生 CSS 选择 Stylus。举个栗子，同样一段样式：
原生 CSS 要这样写：
css
.container .panel {
height: 80vh;
border-radius: 50px;
margin: 10px;
}
.container .panel h3 {
font-size: 24px;
position: absolute;
}
.container .panel.active {
flex: 5;
}
而 Stylus 可以写成：
stylus
.container
.panel
height 80vh
border-radius 50px
margin 10px
h3
font-size 24px
position absolute
&.active
flex 5
看到区别了吗？不用写花括号、分号，嵌套直接用缩进，像写 Python 一样优雅！这还只是基础，它还有变量、函数、自动前缀等黑科技，后面实战中会慢慢体现。
实战：从 0 到 1 实现动态图片面板
第一步：准备工作
- 安装 Stylus：
npm i -g stylus（需要先装 Node.js） - 新建 3 个文件：
index.html（结构）、style.styl（样式源文件）、common.js（交互逻辑） - 启动实时编译：
stylus style.styl -o style.css -w（-o 指定输出 CSS 文件，-w 监听修改自动编译）
第二步：HTML 结构 —— 极简主义
html
预览
<div class="container">
<div class="panel active" style="background-image: url('图片1地址')">
<h3>Explore The World</h3>
</div>
<!-- 重复4个类似面板，换图片和标题 -->
</div>
核心就是一个container容器包裹 5 个panel，每个面板用style属性设置背景图（实际项目中可优化成 CSS 变量），active类控制当前展开状态。
第三步：Stylus 样式 —— 优雅的布局魔法
这部分是重点，我们分模块拆解：
1. 基础重置与全局布局
stylus
/* 清除默认内外边距 */
*
margin 0
padding 0
body
display flex /* 弹性布局上下文 */
justify-content center /* 水平居中 */
align-items center /* 垂直居中 */
height 100vh /* 占满整个视口高度 */
overflow hidden /* 隐藏滚动条 */
这里用display: flex让 body 成为弹性容器，直接把container居中，比用 margin 或 position 方便多了。overflow: hidden是为了避免面板展开时出现滚动条。
2. 容器与面板布局
stylus
.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 /* 背景图居中 */
transition all 700ms ease-in /* 所有属性变化加过渡动画 */
关键是flex: 0.5：弹性布局中，子元素的flex属性控制它们的占比。初始时 5 个面板都是 0.5，总占比 2.5，平均分配容器宽度；当某个面板变成flex: 5（后面会写），总占比就是 5+0.5*4=7，它就会占大部分空间 —— 这就是展开 / 收缩的核心原理！
3. 标题动画与激活状态
stylus
.panel
h3
font-size 24px
position absolute /* 相对于面板定位 */
bottom 20px
left 20px
margin 0
opacity 0 /* 初始透明 */
transition opacity 300ms ease-in 400ms /* 延迟400ms再显示，更自然 */
&.active /* &代表父元素本身，即.panel.active */
flex 5 /* 激活时占比变大 */
h3
opacity 1 /* 标题显示 */
这里的&.active是 Stylus 的嵌套语法，等价于.panel.active，比原生 CSS 少写一次.panel，超方便！标题的过渡动画加了 400ms 延迟，是为了等面板展开得差不多了再显示，避免突兀。
4. 响应式适配：手机上也好看
stylus
@media (max-width: 480px) /* 屏幕宽度≤480px时生效 */
.container
width 100vw /* 占满屏幕宽度 */
.panel:nth-of-type(4), /* 隐藏第4、5个面板 */
.panel:nth-of-type(5)
display none
手机屏幕窄，5 个面板挤不下，所以隐藏最后两个。nth-of-type选择器精准定位，配合媒体查询，轻松实现响应式。
第四步：JS 交互 —— 让面板 "活" 起来
最后加几行 JS 实现点击切换激活状态：
javascript
运行
const panels = document.querySelectorAll('.panel')
panels.forEach(panel => {
panel.addEventListener('click', () => {
// 先移除所有面板的active类
panels.forEach(p => p.classList.remove('active'))
// 给当前点击的面板添加active类
panel.classList.add('active')
})
})
逻辑很简单：点击任一面板，先把所有面板的active类去掉（让它们收缩），再给当前面板加active类（让它展开）。
进阶技巧：Stylus 让 CSS 更像 "编程"
这个案例只用到了 Stylus 的嵌套功能，其实它还有很多提升效率的特性：
-
变量：重复使用的数值 / 颜色定义成变量，改一处全生效
stylus
panelHeight = 80vh panelRadius = 50px .panel height panelHeight border-radius panelRadius -
混合（Mixins） ：封装重复样式，像函数一样调用
stylus
flexCenter() display flex justify-content center align-items center body flexCenter() /* 直接调用，少写3行代码 */ -
自动前缀：加
-webkit-等前缀不用手动写，编译时自动生成（需要配置插件）
总结：写 CSS 的正确姿势
用 Stylus 写 CSS，就像从手写书信变成用微信聊天 —— 效率翻倍还更优雅。配合弹性布局的灵活排版和过渡动画的丝滑效果，几行代码就能实现以前要写几十行的交互。
这个图片面板案例可以直接用到项目中，比如：
- 官网首页的特色板块展示
- 相册 / 作品集的浏览功能
- 产品特点的对比展示
快去试试 Stylus 吧，保证你再也回不去原生 CSS 了！如果觉得有用，别忘了点赞收藏，下次写布局直接抄作业～
