用 Stylus 优雅重写 CSS：从经典布局到高效预处理
在日常前端开发中，我们经常需要编写大量重复的 CSS 代码，比如设置布局、过渡动画、媒体查询等。
为了提升效率与可维护性，预处理器应运而生，Stylus 就是其中语法最简洁、表达力最强的一种。
本文将通过一个「图片面板伸缩布局」的例子，带你从原生 CSS 过渡到 Stylus，体会它的强大与简洁。
一、原生 CSS 实现效果
先来看一段常见的布局效果：点击图片卡片时放大显示，并在小屏幕上自动隐藏部分面板。
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.container {
display: flex;
width: 90vw;
}
.container .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;
}
.container .panel h3 {
font-size: 24px;
position: absolute;
left: 20px;
bottom: 20px;
margin: 0;
opacity: 0;
transition: opacity 300ms ease-in 400ms;
}
.container .panel.active {
flex: 5;
}
.container .panel.active h3 {
opacity: 1;
}
@media (max-width: 480px) {
.container {
width: 100vw;
}
.panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
}
}
功能点说明：
- Flex 布局：使用
display: flex让多个图片面板按比例分布。 - 过渡动画：
transition实现柔和放大效果。 - 响应式布局：通过
@media (max-width:480px)控制小屏显示数量。
二、Stylus 简介
Stylus 是一款 CSS 预处理器，语法简洁、可编程性强，支持：
- 变量、函数、嵌套、混合（mixins）
- 自动添加前缀
- 模块化组织代码
浏览器无法直接解析 .styl 文件，需要编译成 .css 文件。
安装与编译
npm i -g stylus
编译命令：
stylus style.styl -o style.css -w
参数解释：
-o：指定输出路径-w：监听文件变化，自动重新编译
三、用 Stylus 重写 CSS
来看同样的效果，用 Stylus 重写后的代码：
*
margin 0
padding 0
body
display flex
flex-direction row
justify-content center
align-items center
height 100vh
overflow hidden
.container
display flex
width 90vw
.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
&.active
flex 5
h3
opacity 1
@media (max-width:480px)
.container
width 100vw
.panel:nth-of-type(4),
.panel:nth-of-type(5)
display none
Stylus 语法特点：
- 去掉花括号
{}和分号;，使用缩进表示层级。 - 支持嵌套：
h3与&.active都属于.panel的内部作用域。 - 继承层级清晰，代码更简短、可读性更高。
四、关键知识点回顾
1. Flex 弹性布局
父元素：display: flex;
常用属性：
justify-content：主轴对齐方式align-items：交叉轴对齐方式flex-direction：主轴方向（row/column）
子元素可用 flex: 1 来均分空间。
2. Transition 过渡动画
让属性变化更平滑。
语法：
transition: [属性] [时长] [过渡函数] [延迟];
例如：
transition: all 700ms ease-in;
transition: opacity 300ms ease-in 400ms;
3. 媒体查询
通过屏幕宽度条件控制不同布局：
@media (max-width:480px) {
/* 针对小屏设备 */
}
五、总结
| 对比项 | CSS | Stylus |
|---|---|---|
| 语法结构 | 严格依赖 {} 与 ; | 使用缩进，更简洁 |
| 模块化 | 需手动拆分文件 | 支持嵌套与作用域 |
| 可维护性 | 中等 | 高 |
| 编译需求 | 无 | 需编译为 CSS |
| 适用场景 | 小型项目 | 中大型项目 |
Stylus 并非替代 CSS，而是让开发更高效的工具。
它适合追求优雅、模块化与维护性的前端项目。