Stylus优化方案详解：你不知道的高级用法

Stylus 优化方案详解：你不知道的高级用法

Stylus 很多人只用来写简单嵌套、变量，但是它的哈希、块级 Mixin、条件循环、插值、@extend、词法作用域这些高级特性，用好可以大幅减少冗余 CSS、统一主题、降低维护成本。本文聚焦代码可维护性、编译输出瘦身、工程化规范，附带高级示例与避坑方案stylus-lan...。

前置区分：这里是 CSS 预处理器 Stylus(styl)，不是浏览器 UserCSS 插件 Stylus。

一、核心优化总原则

区分 Mixin 和 @extend：Mixin 是代码复制，适合带参数动态样式;@extend 是选择器合并，适合静态基础样式，减少重复属性输出;

优先哈希对象管理主题，而不是零散一堆变量;

编译期计算、循环生成样式，不要手写重复选择器;

严格控制嵌套深度(≤3 层)，避免生成超长、难以覆盖的选择器;

配合 PostCSS + Autoprefixer，不在 Stylus 里手写浏览器前缀。

二、高级用法 1：哈希(Hashes)结构化主题管理【最推荐】

普通写法：散落一堆颜色、间距变量，多主题很难维护。哈希可以把一组相关属性打包，支持遍历、取值、合并，适合设计系统、多主题切换stylus-lan...。

theme = {

primary: #2563eb,

success: #10b981,

danger: #ef4444,

radius: 6px,

shadow: 0 2px 12px rgba(0,0,0,0.08)

}

// 取值

.btn-primary

color white

background theme.primary

border-radius theme.radius

box-shadow theme.shadow

// 遍历哈希批量生成工具类(编译一次性生成，零运行成本)

for name, color in {primary:theme.primary, danger:theme.danger}

.text-{name}

color color

.bg-{name}

background color

✅ 优化收益：新增主题只需要新增一个哈希，配合 merge () 合并覆盖;适合组件库、后台系统。

内置函数 keys(hash) / values(hash) / merge(a,b) 可以动态合并主题，做深色模式很方便。

三、高级用法 2：块级 Mixin(Block Mixin)，传递样式块

普通 Mixin 只能传参数;块级 Mixin 可以接收一段样式块，用来封装布局容器、媒体查询包装器，是 Stylus 独有的优雅方案Stylus。

mq(min-width)

@media (min-width: min-width)

{block}

// 使用 + 开头，传入样式块

+mq(768px)

.container

display flex

gap 16px

实战封装断点：

breakpoints = {sm:480px, md:768px, lg:1200px}

respondTo(name)

@media (min-width: breakpoints[name])

{block}

+respondTo('md')

.card

width 50%

✅ 优化收益：媒体查询统一收口，不用到处写 @media，断点只改一处。

四、高级用法 3：函数 + 条件判断，封装可复用计算逻辑

Mixin 输出样式;function 只返回值，适合颜色变换、尺寸换算、单位转换，不要混用。

// 颜色明暗函数

color-shift(color, amount = 10%)

if amount > 0

darken(color, amount)

else

lighten(color, abs(amount))

.btn

background theme.primary

&:hover

background color-shift(theme.primary, 12%)

条件判断还可以做：根据环境、参数输出不同单位、不同阴影层级。  避坑：函数只做计算;不要在 function 里写属性输出，这是 Mixin 的职责。

五、高级用法 4：@extend 精准继承，解决 CSS 膨胀(很多人用错)

很多人无脑用 Mixin，导致每处调用都复制一份相同 CSS，文件体积爆炸。 @extend 的原理：合并选择器，共用同一套属性，只输出一次。

.base-card

padding 16px

border-radius 8px

background #fff

.card-normal

@extend .base-card

box-shadow 0 2px 8px rgba(0,0,0,0.06)

.card-pop

@extend .base-card

box-shadow 0 4px 16px rgba(0,0,0,0.12)

编译后：.base-card, .card-normal, .card-pop { padding:16px;... } ❌ 禁忌：不要在嵌套深层、伪类、动画里滥用 extend;不要 extend 选择器里有父引用&，容易生成诡异选择器。

取舍口诀：静态基础样式用 @extend;需要传参、差异化样式用 Mixin。