开发工具精选项目

Stylus

语法灵活、支持变量、函数、Mixin 和控制流的 CSS 预处理语言。

GitHub 访问官网

主要语言JavaScript

开源许可MIT

项目类型开发工具

维护状态稳定维护

OVERVIEW

项目概述

Stylus 允许开发者按偏好省略花括号、冒号和分号，并通过变量、函数、Mixin、插值、条件与循环生成标准 CSS。

Stylus 是采用 MIT 许可证、为 Node.js 构建的 CSS 预处理语言。它既能接受接近标准 CSS 的花括号写法，也能使用依赖缩进、可省略冒号和分号的简洁语法，并把两种风格编译为普通 CSS。Stylus 提供变量、词法作用域、嵌套选择器、父引用、Mixin、用户函数、插值、条件、循环、内置函数、动态导入和 JavaScript API。函数与 Mixin 使用相同的定义形式：在表达式中返回值时作为函数，在选择器中展开声明时作为 Mixin。Vite 在项目安装 stylus 包后可以直接处理 .styl 文件，因此它仍适合维护既有 Stylus 资产以及偏好高度灵活作者语法的团队。

当前稳定版v0.64.0

运行平台Node.js

输入文件*.styl

FEATURES

主要特点

Stylus 以高度自由的语法连接变量、函数、Mixin、控制流和 CSS 生成，让团队可以建立紧凑的样式抽象。

高度灵活的语法

花括号、冒号、分号和部分逗号均可按风格省略，既可编写接近 CSS 的代码，也可采用简洁缩进语法。

变量与词法作用域

变量使用赋值表达式保存颜色、尺寸、List、Selector 或函数，并按定义位置的词法作用域解析。

函数与 Mixin 共用模型

同一声明可以在属性值中返回计算结果，也能在规则块中展开一组属性，支持默认参数、命名参数和多个返回值。

嵌套与父引用

选择器和媒体查询可按组件结构嵌套，& 可以引用父选择器以生成伪类、状态和 Modifier。

条件与迭代

if、unless、for 和内置迭代能力可以根据配置生成主题、Utility、Grid 和组件 Variant。

插值与动态属性

花括号插值可构造选择器、属性和字符串，适合从 Token 或循环生成命名规则。

丰富的内置函数

提供颜色、数学、单位、List、String、类型判断、图片尺寸和路径等函数，也能用 JavaScript 注入自定义函数。

CLI、JavaScript API 与插件

stylus 命令支持编译、监听和压缩；Node.js API 可配置路径、Source Map、函数和插件，将编译器嵌入工具链。

USE CASES

适用场景

适合维护现有 Stylus 项目、需要 JavaScript 可扩展预处理器，或偏爱缩进式简洁语法的小型团队。

已有 Stylus 代码库

适合继续维护使用 .styl、Nib、Mixin 与缩进语法的旧版前端、主题和静态站点。

偏好紧凑语法的团队

对于熟悉缩进式语言并愿意统一格式规范的团队，Stylus 可以显著减少视觉噪声。

设计令牌与 Utility 生成

变量、函数、插值和循环可从颜色、间距、断点或尺寸集合批量生成规则。

传统服务端和静态页面

Stylus 可独立编译为 CSS，不依赖客户端框架，适用于模板引擎和静态站点构建。

JavaScript 构建工具

可通过 Node.js API 注册函数和插件，集成内部主题编译器、资产服务或文档生成流程。

轻量组件样式

嵌套、Mixin 和颜色函数可组织组件状态与响应式规则，但类名隔离仍需额外方案。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

Stylus 擅长的地方

语法选择自由，可在完整 CSS 风格和简洁缩进风格之间建立团队规范
变量、Mixin、函数、条件与循环覆盖常见 CSS 预处理需求
函数和 Mixin 共享定义模型，适合创建紧凑、可复用的样式工具
JavaScript 实现便于通过 npm、Vite 和 Node.js API 集成
最终输出普通 CSS，浏览器无需加载 Stylus 运行时
成熟的既有语法和生态仍能支撑大量历史项目与主题资产

需要注意

采用前应考虑的问题

维护节奏相对较低

核心语言较成熟，但近年正式版本和代码活动不如 Sass、PostCSS 频繁，新项目应先确认 Node.js、Bundler 和插件兼容性。

灵活语法也会产生歧义

省略冒号、括号和逗号可能让属性、函数调用与 Selector 难以区分，团队必须统一格式化和代码审查规则。

浏览器不能直接执行 Stylus

.styl 文件必须在构建阶段编译，开发、测试、生产和组件库发布环境都要使用一致的编译器配置。

不会自动隔离选择器

变量采用词法作用域，但生成类名默认仍处于全局 CSS，需要命名规范、CSS Modules 或其他封装方式。

深层嵌套会提高耦合

紧凑缩进容易让开发者继续嵌套 DOM 结构，最终可能产生高特异性和难以复用的长选择器。

缺少严格的现代模块系统

@import 和 @require 可拆分文件，但公共 API、命名空间和配置约束弱于 Sass 的 @use / @forward。

动态生成需要谨慎

插值、循环和自定义 JavaScript 函数很强大，但过度使用会让源码难以对应生成 CSS，并增加升级与安全审查成本。

浏览器兼容仍需后处理

Stylus 负责编译语言特性，不会自动根据 Browserslist 处理所有前缀，通常仍要搭配 PostCSS 或 Bundler 优化。

QUICK START

快速开始

在 Vite 项目中安装 Stylus，拆分变量、Mixin 和组件样式，再由 Vite 内建预处理支持完成编译。

1创建 Vite 项目并安装 Stylus

bash

npm create vite@latest stylus-app -- --template vanilla-ts
cd stylus-app
npm install
npm install -D stylus

2定义设计变量

stylus

brand = #ff6347
surface = #ffffff
text = #0f172a
radius = .75rem
tablet = 48rem

3创建函数与 Mixin

stylus

focus-ring(color = brand)
  outline 3px solid alpha(color, .45)
  outline-offset 3px

button-tone(tone = 'brand')
  if tone == 'brand'
    background brand
    color white
  else
    background surface
    color text

space(step)
  step * .25rem

4编写组件样式

stylus

@require './tokens'
@require './mixins'

.button
  button-tone('brand')
  padding space(3) space(4)
  border 0
  border-radius radius
  font-weight 700
  cursor pointer

  &:hover
    background darken(brand, 10%)

  &:focus-visible
    focus-ring()

5组合入口样式和响应式规则

stylus

@require './styles/tokens'
@require './styles/mixins'
@require './styles/button'

.card
  width min(32rem, 100%)
  padding 1.5rem
  border-radius radius
  background surface
  color text

  @media (min-width: tablet)
    padding 2rem

6在 Vite 入口导入 Stylus

typescript

import "./main.styl";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
  <main class="card">
    <h1>Stylus</h1>
    <button class="button">开始使用</button>
  </main>
`;

7通过命令行编译

bash

# 编译单个入口到输出目录
npx stylus src/main.styl -o dist

# 压缩生产 CSS
npx stylus src/main.styl -o dist --compress

8通过 Node.js API 编译

javascript

import stylus from "stylus";

const source = `
brand = #ff6347
.button
  background brand
  color white
`;

const css = await new Promise((resolve, reject) => {
  stylus(source)
    .set("filename", "src/button.styl")
    .set("compress", true)
    .render((error, output) => {
      if (error) reject(error);
      else resolve(output);
    });
});

console.log(css);

9验证 Vite 生产构建

bash

npm run dev
npm run build
npm run preview

下一步：团队应选定一种统一语法风格，不要在同一代码库随意混用省略与完整标点。控制嵌套和生成逻辑规模，并在升级前检查编译输出、插件兼容性和 Node.js 支持范围。

ALTERNATIVES

类似项目

这些方案都能在构建阶段扩展 CSS，但对语法约束、模块边界、生态规模和插件化程度有不同取舍。

Sass

拥有变量、嵌套、Mixin、函数和模块系统的成熟 CSS 预处理语言。

查看项目

Less

以变量、Mixin、嵌套和函数扩展 CSS 的 JavaScript 预处理语言。

查看项目

PostCSS

通过 JavaScript 插件解析、分析和转换 CSS 的工具平台。

查看项目

CSS Modules

让 CSS 类名和动画名称默认拥有局部作用域的模块化方案。

查看项目

COMPARISON

Stylus vs Sass

Stylus 和 Sass 都能把变量、嵌套、Mixin、函数与控制逻辑编译为 CSS。Stylus 强调可省略标点的自由语法和统一的函数 / Mixin 模型；Sass 提供 SCSS 与缩进式两种明确语法，并以 Dart Sass、@use / @forward 和丰富内置模块形成更严格、活跃的现代生态。

比较维度	Stylus	Sass
主要语法	可自由省略花括号、冒号、分号与部分逗号	CSS 兼容的 SCSS 或独立的缩进式 Sass
官方实现	JavaScript / Node.js 的 Stylus	Dart Sass，并提供 JS 与 Embedded 发行版
变量	name = value，支持词法作用域	$name: value，配合模块命名空间
复用模型	函数与 Mixin 同形，支持插值和 Block	@mixin、@function、@extend 与 Placeholder 分工明确
模块组织	@import、@require 与路径配置	@use、@forward、命名空间和模块配置
控制逻辑	if、unless、for 与表达式	@if、@else、@each、@for 与 @while
生态状态	语言成熟但近年维护和新项目采用相对有限	更新更活跃，框架集成、规范迁移和文档更完整
更适合	已有 Stylus 资产和偏好自由缩进语法的团队	新建复杂样式库、严格模块边界和长期生态支持