使用 Stylus 高效编写 CSS 样式：一篇完整的 HTML + Stylus 实战笔记

UIUV
80 阅读5分钟

使用 Stylus 高效编写 CSS 样式：一篇完整的 HTML + Stylus 实战笔记

在现代前端开发中，CSS 虽然功能强大，但其原生语法缺乏编程能力，导致在大型项目中难以维护。为了解决这一问题，CSS 预处理器应运而生。其中，Stylus 是一门极具表现力、语法简洁优雅的 CSS 预处理器，它极大地提升了 CSS 的可读性、可维护性和开发效率。

本文将结合一个实际的 HTML 页面，详细讲解如何使用 Stylus 编写样式，并最终编译成标准的 CSS 文件，实现一个响应式、动画丰富的视觉效果布局。

image.png

一、什么是 Stylus？

Stylus 是一个基于 Node.js 的 CSS 预处理器，由 TJ Holowaychuk（Express 框架作者）开发。它允许开发者使用变量、函数、混合（mixins）、嵌套、条件判断等编程特性来编写 CSS，最终通过编译生成浏览器可识别的标准 CSS。

与 Sass、Less 相比，Stylus 的语法更加灵活，支持缩进式写法（类似 Python），也支持传统大括号写法，且不需要分号和冒号，极大地减少了代码冗余。

二、安装与编译 Stylus

要使用 Stylus，首先需要安装 Node.js 环境，然后通过 npm 全局安装：

npm install -g stylus

安装完成后，可以使用以下命令将 .styl 文件编译为 .css 文件：

stylus style.styl -o style.css
监听文件变化，实时编译（推荐开发时使用）
stylus style.styl -o style.css -w

-w 参数表示“watch”，即开启监听模式，当你修改 .styl 文件时，会自动重新编译为 CSS，极大提升开发效率。

三、项目结构与 HTML 布局

我们构建一个响应式的图片面板切换页面，包含 5 个背景图不同的面板，点击时会放大并显示标题。 HTML 结构（index.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylus 弹性布局示例</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<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>

四、使用 Stylus 编写样式（style.styl）

下面是使用 Stylus 编写的完整样式文件 style.styl：

// 重置默认样式
margin: 0
padding: 0
box-sizing: border-box

// 页面主体样式
body
display: flex
flex-direction: row
justify-content: center
align-items: center
height: 100vh
overflow: hidden
background: #000
font-family: 'Arial', sans-serif

// 容器布局
.container
display: flex
width: 90vw
height: 90vh

// 面板样式
.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 核心特性详解

  1. 嵌套语法（Nesting）

Stylus 支持深度嵌套，使结构更清晰。例如：

.container
.panel
h3
opacity: 0
&.active
h3
opacity: 1

& 表示父选择器，.panel &.active 等价于 .panel.active。 2. 变量（Variables）

可以定义变量统一管理颜色、尺寸等：

primary-color = #fff
panel-radius = 50px

.panel
color: primary-color
border-radius: panel-radius
  1. 混合（Mixins）

复用样式代码：

flex-center()
display: flex
justify-content: center
align-items: center

.container
flex-center()
  1. 自动添加浏览器前缀

虽然 Stylus 本身不自动加前缀，但可结合 PostCSS 工具实现。 5. 运算与函数

Stylus 支持数学运算：

.panel
margin: 10px
width: (90vw - 40px) / 5 // 减去 margin 后平均分配

六、关键 CSS 特性解析

  1. Flex 弹性布局

本例中使用 display: flex 实现主轴与侧轴对齐： justify-content: center：水平居中 align-items: center：垂直居中 flex: 0.5 与 flex: 5 实现比例缩放 2. Transition 过渡动画

transition: all 700ms ease-in
all：所有属性变化都触发过渡
700ms：持续时间
ease-in：缓动函数
可添加延迟：transition: opacity 300ms ease-in 400ms
  1. 媒体查询（Media Query）
@media (max-width: 480px)
.container
width: 100vw

用于响应式设计，适配手机屏幕（如 iPhone 宽度约 414px）。

七、JavaScript 交互（common.js）

为了让面板点击时切换 active 类，需添加简单 JS：

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

panels.forEach(panel => {
panel.addEventListener('click', () => {
// 移除所有 active
panels.forEach(p => p.classList.remove('active'))
// 当前添加 active
panel.classList.add('active')
})
})

八、开发流程总结

  1. 初始化项目：创建 index.html、style.styl、common.js
  2. 安装 Stylus：npm install -g stylus
  3. 开启监听编译：stylus style.styl -o style.css -w
  4. 编写 Stylus 代码
  5. 浏览器实时查看效果
  6. 发布时确保生成最终 CSS

九、Stylus 的优势

特性 说明

语法简洁 无需分号、冒号，支持缩进

编程性强 支持变量、函数、循环、条件

嵌套清晰 层级结构一目了然

模块化 可导入其他 .styl 文件

高效开发 减少重复代码，提升维护性

十、结语

Stylus 作为一款强大的 CSS 预处理器，不仅让样式编写更高效，也使代码更具可读性和可维护性。通过本例，我们实现了： 使用 Flex 布局创建响应式面板

利用 Transition 实现平滑动画

通过媒体查询适配移动端

结合 JavaScript 实现交互效果

使用 Stylus 提升开发体验

在实际项目中，建议将 Stylus 与 Webpack、Vite 等构建工具集成，实现自动化编译、压缩、前缀添加等流程，进一步提升工程化水平。

Stylus 不仅是 CSS 的增强，更是前端工程化思维的体现。掌握它，你将迈出高效前端开发的重要一步。 当前时间：2025年10月29日，正是学习新技术的好时机。立即尝试 Stylus，让你的 CSS 编程之旅更加优雅！

avatar
文章
阅读
粉丝