文档知识库教程开发工具【免费下载链接】reference为开发人员分享快速参考备忘清单(速查表)项目地址https://gitcode.com/jaywcjlove/reference点击查看免费下载Stylus 是为 Node.js 构建的富有表现力、健壮、功能丰富的 CSS 语言CSS 预处理器在jaywcjlove/reference项目中收录于 docs/stylus.md与 Less.js 备忘清单 共同构成 CSS 预处理器的快速查阅入口。本篇指南完整继承该备忘清单的全部示例并结合仓库中的配套文档与工程配置深入讲解安装编译、双语法书写、Mixins、函数、值与高级控制流、内置函数六大板块读完后你可以直接上手用 Stylus 编写可维护的样式代码并能快速定位每条语法对应的内置函数与运算符行为。入门介绍与安装Stylus 由 Node.js 生态驱动可通过 npm 或 pnpm 全局安装# npm $ npm install stylus -g # pnpm $ pnpm add -g stylus安装后即可在终端获得stylus命令行工具。在 Node.js 环境中使用stylus编译样式文件$ stylus one.styl two.styl # stylus 从标准输入读取并输出到标准输出 $ stylus --compress some.styl some.css # 将 css 目录中的文件编译输出到 public/css $ stylus css --out public/css上述三条命令覆盖了最常见的三种场景一次性编译多个文件、通过标准输入/输出与管道协作配合--compress压缩输出、以及整目录编译并指定输出目录--out。Stylus 还支持反向操作——把现成的 CSS 转换输出为*.styl文件方便旧项目迁移$ stylus --css test.css test.styl $ stylus --css test.css /tmp/out.styl--css标志让 Stylus 以 CSS 兼容模式解析输入同样支持标准输入重定向与直接指定输入输出文件两种形式。支持 CSS 嵌套语法与许多预处理器一致Stylus 允许你使用熟悉的 CSS 花括号嵌套写法保持选择器层级结构清晰.box { color: blue; .button { color: red; } }这种写法对从原生 CSS 迁移过来的开发者零学习成本嵌套层级直接映射为后代选择器。支持类 Python 缩进语法Stylus 最大的特色是同时支持类 Python 的缩进语法——去掉花括号与分号仅靠缩进表达层级.box color: blue .button color: red也有效冒号也是可选的。这种写法通常在 Stylus 官方文档的语法示例中使用代码更简洁、层级一目了然。两种语法在 Stylus 中可以混用你可以按场景自由选择。混合 MixinsMixins混合是 Stylus 中复用样式代码的基本单位。定义一个不带参数的 Mixin内部直接书写声明caps-type() letter-spacing: 0.05em使用时在目标选择器内调用该 Mixinh5 caps-type()编译 css 为h5 { letter-spacing: 0.05em; }可以看到Mixin 的调用位置被替换为它内部的声明块实现了样式片段的“函数化复用”。Mixin 的完整进阶用法参数、默认值、块混合、Rest 参数详见下文 混合 Mixins 一节。变量 Variables变量是任何预处理器的基础能力。Stylus 中直接以变量名 值的形式定义无需$前缀royal-blue #36a使用变量div color: royal-blue编译后div的color即解析为#36a。需要注意的是标识符变量名、函数等也可以包括$字符两种风格等价$font-size 14px body { font: $font-size sans-serif; }$前缀是可选风格多用于与 Sass/Less 习惯保持一致。变量支持在整个文档中共享是构建设计令牌Design Tokens的基础。混合 Mixins没有参数无参数 Mixin 适合固定复用的样式片段例如为元素统一添加红色边框red-border() border: solid 2px red调用div red-border()div即获得border: solid 2px red。注意无参数 Mixin 在调用时仍需带括号以区别于普通属性。有参数带参数 Mixin 让样式复用具备灵活性。典型的浏览器前缀封装border-radius(n) -webkit-border-radius: n border-radius: n调用时有两种等价方式div border-radius: 2px border-radius(2px)这两种写法都等价于调用border-radius(n)并传入2px第一种把 Mixin 当作“属性”书写border-radius: 2px第二种是显式函数式调用。这也是 Stylus 区别于其他预处理器的特性——Mixin 与属性同名时可以“透明”地传递参数。参数默认值参数可以声明默认值缺省时自动生效border-radius(n 2px) -webkit-border-radius: n当调用border-radius()且不传参时n取2px。默认值让 Mixin 在“开箱即用”与“按需定制”之间取得平衡。块混合Stylus 支持把一段代码块作为整体传入 Mixin配合{block}占位符实现类似“模板”的抽象。最经典的场景是响应式断点封装mobile() media (max-width: 480px) {block}调用时使用mixin()前缀语法传入代码块mobile() width: 10px{block}位置会被调用方传入的width: 10px替换最终编译为media (max-width: 480px) { width: 10px; }。块混合是构建媒体查询、主题包装等高阶抽象的有力工具。Rest 参数当参数数量不确定时使用args...收集剩余参数shadow(offset-x, args...) box-shadow: offset-x args margin-top: offset-x调用时传入多个值多余部分自动归入args#login shadow: 1px 2px 5px #eee这里offset-x取1pxargs收集2px 5px #eee最终生成box-shadow: 1px 2px 5px #eee。Rest 参数让 Mixin 可以透传任意数量的值非常适合封装box-shadow、transition这类多值属性。函数 Functions函数 FunctionsStylus 的函数与 Mixin 语法几乎一致但更强调“返回值”。定义一个加法函数add(a, b) a b函数体的最后一个表达式即返回值调用方式与普通函数相同body padding: add(10px, 5)编译后padding: 15px。注意 Stylus 的单位运算规则10px 5会得到15px单位跟随第一个操作数。参数默认值函数同样支持默认参数add(a, b 2) a b当只传一个参数时b取默认值2例如add(10px)得到12px。命名参数参数较多时可以用命名参数提升可读性与调用顺序的灵活性shadow(x, y) x y (y * 1.5) #000调用.button box-shadow: shadow(x: 2, y: 4)x: 2, y: 4按名称传参计算结果为2 4 6 #000第三个值由y * 1.5推导。命名参数让复杂的多参函数调用意图更清晰。多个返回值函数可以一次性返回多个值配合索引访问sizes() 8px 16pxsizes()[0] // → 8px sizes()[1] // → 16px多个返回值以空格分隔的列表形式存在通过[0]、[1]索引取值。这一特性常与 图片尺寸 这类需要同时返回宽高的内置函数搭配使用。arguments所有函数体内都隐式存在arguments局部变量包含调用时传入的全部参数因此可以写出不定参数的求和函数sum() n 0 for num in arguments n n num调用sum(1,2,3,4,5) // 15参数local可用于所有函数体并包含所有传递的参数。结合for循环即可实现任意数量的参数聚合处理。hash 示例利用 Stylus 的列表结构可以实现简易的哈希查找。下面的get函数遍历由成对元素组成的列表返回匹配 key 对应的值get(hash, key) return pair[1] if pair[0] key for pair in hash hash (one 1) (two 2) (three 3) get(hash, two) // 2hash是三个二元组的列表get通过后置的for pair in hash遍历每个二元组if pair[0] key命中后return pair[1]。这个例子展示了 Stylus 把“表达式 循环 条件 提前返回”组合成单行逻辑的能力。值 Values条件赋值?运算符只在变量尚未被赋值时才执行赋值相当于“存在则保留”royal-blue #36a royal-blue ? #89fdiv color: royal-blue // #36a由于royal-blue之前已被赋值为#36a第二行的?不会生效最终color仍为#36a。?常用于在库/主题中提供“可被外部覆盖的默认值”。属性查找Stylus 允许在当前规则块内引用之前定义过的属性值实现基于属性的相对计算.logo width: w 150 margin-left: -(w / 2) // or height: 80px margin-top: -(height / 2)两种写法等价一是把属性值赋给变量w后参与运算二是用height直接查找同规则块内的同名属性属性名语法。例如margin-top: -(height / 2)会根据height: 80px自动算出-40px非常适合实现“水平/垂直居中”这类相对布局。插值{expression}插值允许在属性名中动态拼接字符串典型场景是生成带浏览器前缀的属性-{prefix}-border-radius: 2px当prefix为webkit时即得到-webkit-border-radius: 2px。插值同样可用于选择器名、变量名的动态拼接见下文 对于循环 中的.text-{i}。Color operatorsStylus 的颜色是“可运算”的直接通过算术运算符完成调色#888 50% // → #c3c3c3 (lighten) #888 - 50% // → #444 (darken) #f00 50deg // → #ffd500 (hue)颜色加/减百分比在明度方向调整加亮、减暗颜色加角度沿色相环旋转色相角deg。这比手写lighten()/darken()更直观让颜色调整可以内联在声明中完成。Casting通过后缀单位可以把表达式“转型”为指定单位的数值n 5pxfoo: (n)em foo: (n * 5)%(n)em把5px转写为5em(n * 5)%则得到25%。括号包裹的表达式加单位后缀即完成单位转换适合在不同度量体系间换算。Lookuplookup()内置函数可以根据字符串形式的名称动态读取变量值light-blue #3bd name blue lookup(light- name)light- name拼接为字符串light-bluelookup据此取出变量light-blue的值#3bd。这一能力是 对于循环 中“按序号动态取变量”的核心支撑。高级功能有条件的if / else if / else是 Stylus 的分支控制结构支持完整的条件表达式链if color blue display: block else if true and true display: inline else if hey is not bye display: flex else display: none条件可以是变量比较、逻辑运算and/or/not甚至字符串比较。Stylus 为比较运算符提供了语义化别名| 运算符 | 别名 | | :- | :- | ||is| |!|is not| |!|isnt|is、is not、isnt与、!完全等价可以根据可读性偏好混用。对于循环for ... in循环配合插值与lookup()可以批量生成规则。下面的例子为 1~3 号字体尺寸逐一生成选择器font-size-1 10px font-size-2 20px font-size-3 30px for i in 1..3 .text-{i} font-size: lookup(font-size- i)1..3表示从 1 到 3 的闭区间.text-{i}通过插值生成.text-1、.text-2、.text-3三个选择器lookup(font-size- i)动态读取对应变量得到 10px/20px/30px。这是“数据驱动样式”的典型写法大量重复的选择器声明被压缩为寥寥数行。定义检查is defined运算符判断变量是否已定义常用于可选配置的防御式编程if ohnoes is defined color: blue只有ohnoes变量存在时color: blue才会被写入输出避免引用未定义变量导致编译异常。False 值在 Stylus 的条件判断中以下值被视为“假”0 null false 即数字0、null、布尔false和空字符串都是 falsy其余值包括空列表按真值处理。理解这一点有助于编写正确的条件分支。类型检查is a运算符用于运行时类型判断可以校验值是否为字符串、标识符、颜色等类型if val is a string if val is a ident if #fff is a rgba // → true第三行值得注意#fff是十六进制颜色但在 Stylus 内部统一表示为 RGBA 颜色模型因此#fff is a rgba结果为true。类型检查常用于编写健壮的自定义函数在入口处校验参数类型。内置函数颜色函数Stylus 内置了完整、可组合的颜色处理函数集无需引入任何外部库。透明度相关alpha(#fff) //→ 1 alpha(rgba(0, 0, 0, 0.2)) //→ 0.2明暗判断dark(black) //→ true light(black) //→ false颜色通道提取hue(#0a0) //→ 50deg saturation(#f00) //→ 100% lightness(#f00) //→ 50% luminosity(#f00) //→ 0.2126单参数调用时hue/saturation/lightness读取对应通道值部分函数支持双参数形式即“取值 设置”二合一hue(#0a0, 0deg) saturation(#f00, 50%) lightness(#f00)调整类函数按幅度修改颜色lighten(color, 10%) darken(color, 10%) saturate(color, 10%) desaturate(color, 10%) invert(color)混合类函数与白/黑混合得到浅色/深色变体tint(color, 50%) // mix with white shade(color, 50%) // mix with black移除引号包裹用于把字符串转成可输出的字面量unquote(string)这些函数可以在任意声明中内联组合例如darken(lighten(#336699, 20%), 5%)是构建主题色板的基础设施。图片尺寸image-size(path)返回给定图片的宽度和高度两个值配合多返回值索引使用width: image-size(tux.png)[0] height: image-size(tux.png)[1]该函数会读取指定路径图片的实际像素尺寸如tux.png常见于需要按图片原始尺寸精确布局的场景。缓存 Cachingcache()内置函数用于消除重复的样式输出。首次调用把内容应用到给定选择器第二次以相同参数调用时会通过extend复用第一次调用生成的选择器size($width) cache(w $width) width: $width .a { size: 10px } .b { size: 10px }// 输出: .a, b { width: 10px }.a与.b都以10px调用size()由于缓存键w10px相同编译结果合并为.a, .b { width: 10px }一个规则显著缩减输出体积。Embed URLembedurl(path)把图片以 base64 编码内联进 CSSbackground: embedurl(logo.png) // → background: url(data:image/png;base64,…)编译后生成data:URI减少 HTTP 请求数适合小体积图标、雪碧图等场景大图内联会显著增加 CSS 体积需按需使用。添加属性add-property(name, expr)允许函数在返回主值的同时“附加”写入额外属性。典型用途是同时输出降级方案与现代属性gradient(color) add-property(background-image, linear-gradient(top, color, darken(color, 20%))) colorbody background: gradient(red)调用gradient(red)时函数返回red赋给background同时通过add-property额外写入background-image: linear-gradient(top, red, darken(red, 20%))。一条声明产出多条属性是优雅的渐进增强封装。sprintf%运算符与s()函数提供类 C 语言的格式化字符串能力-webkit-gradient(%s, %s, %s) % (linear (0 0) (0 100%)) // → -webkit-gradient(linear, 0 0, 0 100%)s(rgba(0, 0, 0, %s), 0.3)模板 % (值列表)按顺序填充%s占位符s(fmt, ...)是等价的函数式写法常用于动态拼接颜色、渐变等需要字符串模板的场景。在 reference 仓库中的位置本篇内容对应仓库中的 docs/stylus.md 备忘清单属于项目“快速参考备忘清单速查表”体系的一部分需要回顾 CSS 基础语法与属性时可对照 CSS 备忘清单想横向比较另一款主流预处理器可查阅 Less.js 备忘清单仓库通过 package.json 中的refs-cli构建工具渲染这些 Markdown 文档并以markdownlint-cli见markdownlint脚本与lint-staged配置统一规范文档格式确保每份速查表的代码示例与排版风格一致。整份清单遵循“一个主题一个区块”的组织方式入门安装与两种语法、Mixins、函数、值、高级控制流、内置函数六大板块层层递进覆盖了 Stylus 从安装到进阶的全部常用能力可直接作为日常开发的速查与参考。赞分享文档知识库教程开发工具【免费下载链接】reference为开发人员分享快速参考备忘清单(速查表)项目地址https://gitcode.com/jaywcjlove/reference点击查看免费下载相关推荐Less.js 备忘清单CSS 预处理器核心语法与内置函数实战速查Less.js 备忘清单CSS 预处理器核心语法与内置函数实战速查 LessLeaner Style Sheets是向后兼容 CSS 的扩展语言本指南以文档教程Elixir 快速参考备忘清单基础语法、集合、模式匹配与函数实战Elixir 快速参考备忘清单基础语法、集合、模式匹配与函数实战 本文以本仓库jaywcjlove/reference面向开发人员的快速参考备忘清单项目文档知识库教程开发工具Quick Reference 备忘清单Less.js 核心语法与内置函数速查指南Quick Reference 备忘清单Less.js 核心语法与内置函数速查指南 LessLeaner Style Sheets 的缩写是一门向后兼容的文档知识库教程开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Stylus 快速参考备忘清单：CSS 预处理器语法、Mixins、函数与内置功能全解
文档知识库教程开发工具【免费下载链接】reference为开发人员分享快速参考备忘清单(速查表)项目地址https://gitcode.com/jaywcjlove/reference点击查看免费下载Stylus 是为 Node.js 构建的富有表现力、健壮、功能丰富的 CSS 语言CSS 预处理器在jaywcjlove/reference项目中收录于 docs/stylus.md与 Less.js 备忘清单 共同构成 CSS 预处理器的快速查阅入口。本篇指南完整继承该备忘清单的全部示例并结合仓库中的配套文档与工程配置深入讲解安装编译、双语法书写、Mixins、函数、值与高级控制流、内置函数六大板块读完后你可以直接上手用 Stylus 编写可维护的样式代码并能快速定位每条语法对应的内置函数与运算符行为。入门介绍与安装Stylus 由 Node.js 生态驱动可通过 npm 或 pnpm 全局安装# npm $ npm install stylus -g # pnpm $ pnpm add -g stylus安装后即可在终端获得stylus命令行工具。在 Node.js 环境中使用stylus编译样式文件$ stylus one.styl two.styl # stylus 从标准输入读取并输出到标准输出 $ stylus --compress some.styl some.css # 将 css 目录中的文件编译输出到 public/css $ stylus css --out public/css上述三条命令覆盖了最常见的三种场景一次性编译多个文件、通过标准输入/输出与管道协作配合--compress压缩输出、以及整目录编译并指定输出目录--out。Stylus 还支持反向操作——把现成的 CSS 转换输出为*.styl文件方便旧项目迁移$ stylus --css test.css test.styl $ stylus --css test.css /tmp/out.styl--css标志让 Stylus 以 CSS 兼容模式解析输入同样支持标准输入重定向与直接指定输入输出文件两种形式。支持 CSS 嵌套语法与许多预处理器一致Stylus 允许你使用熟悉的 CSS 花括号嵌套写法保持选择器层级结构清晰.box { color: blue; .button { color: red; } }这种写法对从原生 CSS 迁移过来的开发者零学习成本嵌套层级直接映射为后代选择器。支持类 Python 缩进语法Stylus 最大的特色是同时支持类 Python 的缩进语法——去掉花括号与分号仅靠缩进表达层级.box color: blue .button color: red也有效冒号也是可选的。这种写法通常在 Stylus 官方文档的语法示例中使用代码更简洁、层级一目了然。两种语法在 Stylus 中可以混用你可以按场景自由选择。混合 MixinsMixins混合是 Stylus 中复用样式代码的基本单位。定义一个不带参数的 Mixin内部直接书写声明caps-type() letter-spacing: 0.05em使用时在目标选择器内调用该 Mixinh5 caps-type()编译 css 为h5 { letter-spacing: 0.05em; }可以看到Mixin 的调用位置被替换为它内部的声明块实现了样式片段的“函数化复用”。Mixin 的完整进阶用法参数、默认值、块混合、Rest 参数详见下文 混合 Mixins 一节。变量 Variables变量是任何预处理器的基础能力。Stylus 中直接以变量名 值的形式定义无需$前缀royal-blue #36a使用变量div color: royal-blue编译后div的color即解析为#36a。需要注意的是标识符变量名、函数等也可以包括$字符两种风格等价$font-size 14px body { font: $font-size sans-serif; }$前缀是可选风格多用于与 Sass/Less 习惯保持一致。变量支持在整个文档中共享是构建设计令牌Design Tokens的基础。混合 Mixins没有参数无参数 Mixin 适合固定复用的样式片段例如为元素统一添加红色边框red-border() border: solid 2px red调用div red-border()div即获得border: solid 2px red。注意无参数 Mixin 在调用时仍需带括号以区别于普通属性。有参数带参数 Mixin 让样式复用具备灵活性。典型的浏览器前缀封装border-radius(n) -webkit-border-radius: n border-radius: n调用时有两种等价方式div border-radius: 2px border-radius(2px)这两种写法都等价于调用border-radius(n)并传入2px第一种把 Mixin 当作“属性”书写border-radius: 2px第二种是显式函数式调用。这也是 Stylus 区别于其他预处理器的特性——Mixin 与属性同名时可以“透明”地传递参数。参数默认值参数可以声明默认值缺省时自动生效border-radius(n 2px) -webkit-border-radius: n当调用border-radius()且不传参时n取2px。默认值让 Mixin 在“开箱即用”与“按需定制”之间取得平衡。块混合Stylus 支持把一段代码块作为整体传入 Mixin配合{block}占位符实现类似“模板”的抽象。最经典的场景是响应式断点封装mobile() media (max-width: 480px) {block}调用时使用mixin()前缀语法传入代码块mobile() width: 10px{block}位置会被调用方传入的width: 10px替换最终编译为media (max-width: 480px) { width: 10px; }。块混合是构建媒体查询、主题包装等高阶抽象的有力工具。Rest 参数当参数数量不确定时使用args...收集剩余参数shadow(offset-x, args...) box-shadow: offset-x args margin-top: offset-x调用时传入多个值多余部分自动归入args#login shadow: 1px 2px 5px #eee这里offset-x取1pxargs收集2px 5px #eee最终生成box-shadow: 1px 2px 5px #eee。Rest 参数让 Mixin 可以透传任意数量的值非常适合封装box-shadow、transition这类多值属性。函数 Functions函数 FunctionsStylus 的函数与 Mixin 语法几乎一致但更强调“返回值”。定义一个加法函数add(a, b) a b函数体的最后一个表达式即返回值调用方式与普通函数相同body padding: add(10px, 5)编译后padding: 15px。注意 Stylus 的单位运算规则10px 5会得到15px单位跟随第一个操作数。参数默认值函数同样支持默认参数add(a, b 2) a b当只传一个参数时b取默认值2例如add(10px)得到12px。命名参数参数较多时可以用命名参数提升可读性与调用顺序的灵活性shadow(x, y) x y (y * 1.5) #000调用.button box-shadow: shadow(x: 2, y: 4)x: 2, y: 4按名称传参计算结果为2 4 6 #000第三个值由y * 1.5推导。命名参数让复杂的多参函数调用意图更清晰。多个返回值函数可以一次性返回多个值配合索引访问sizes() 8px 16pxsizes()[0] // → 8px sizes()[1] // → 16px多个返回值以空格分隔的列表形式存在通过[0]、[1]索引取值。这一特性常与 图片尺寸 这类需要同时返回宽高的内置函数搭配使用。arguments所有函数体内都隐式存在arguments局部变量包含调用时传入的全部参数因此可以写出不定参数的求和函数sum() n 0 for num in arguments n n num调用sum(1,2,3,4,5) // 15参数local可用于所有函数体并包含所有传递的参数。结合for循环即可实现任意数量的参数聚合处理。hash 示例利用 Stylus 的列表结构可以实现简易的哈希查找。下面的get函数遍历由成对元素组成的列表返回匹配 key 对应的值get(hash, key) return pair[1] if pair[0] key for pair in hash hash (one 1) (two 2) (three 3) get(hash, two) // 2hash是三个二元组的列表get通过后置的for pair in hash遍历每个二元组if pair[0] key命中后return pair[1]。这个例子展示了 Stylus 把“表达式 循环 条件 提前返回”组合成单行逻辑的能力。值 Values条件赋值?运算符只在变量尚未被赋值时才执行赋值相当于“存在则保留”royal-blue #36a royal-blue ? #89fdiv color: royal-blue // #36a由于royal-blue之前已被赋值为#36a第二行的?不会生效最终color仍为#36a。?常用于在库/主题中提供“可被外部覆盖的默认值”。属性查找Stylus 允许在当前规则块内引用之前定义过的属性值实现基于属性的相对计算.logo width: w 150 margin-left: -(w / 2) // or height: 80px margin-top: -(height / 2)两种写法等价一是把属性值赋给变量w后参与运算二是用height直接查找同规则块内的同名属性属性名语法。例如margin-top: -(height / 2)会根据height: 80px自动算出-40px非常适合实现“水平/垂直居中”这类相对布局。插值{expression}插值允许在属性名中动态拼接字符串典型场景是生成带浏览器前缀的属性-{prefix}-border-radius: 2px当prefix为webkit时即得到-webkit-border-radius: 2px。插值同样可用于选择器名、变量名的动态拼接见下文 对于循环 中的.text-{i}。Color operatorsStylus 的颜色是“可运算”的直接通过算术运算符完成调色#888 50% // → #c3c3c3 (lighten) #888 - 50% // → #444 (darken) #f00 50deg // → #ffd500 (hue)颜色加/减百分比在明度方向调整加亮、减暗颜色加角度沿色相环旋转色相角deg。这比手写lighten()/darken()更直观让颜色调整可以内联在声明中完成。Casting通过后缀单位可以把表达式“转型”为指定单位的数值n 5pxfoo: (n)em foo: (n * 5)%(n)em把5px转写为5em(n * 5)%则得到25%。括号包裹的表达式加单位后缀即完成单位转换适合在不同度量体系间换算。Lookuplookup()内置函数可以根据字符串形式的名称动态读取变量值light-blue #3bd name blue lookup(light- name)light- name拼接为字符串light-bluelookup据此取出变量light-blue的值#3bd。这一能力是 对于循环 中“按序号动态取变量”的核心支撑。高级功能有条件的if / else if / else是 Stylus 的分支控制结构支持完整的条件表达式链if color blue display: block else if true and true display: inline else if hey is not bye display: flex else display: none条件可以是变量比较、逻辑运算and/or/not甚至字符串比较。Stylus 为比较运算符提供了语义化别名| 运算符 | 别名 | | :- | :- | ||is| |!|is not| |!|isnt|is、is not、isnt与、!完全等价可以根据可读性偏好混用。对于循环for ... in循环配合插值与lookup()可以批量生成规则。下面的例子为 1~3 号字体尺寸逐一生成选择器font-size-1 10px font-size-2 20px font-size-3 30px for i in 1..3 .text-{i} font-size: lookup(font-size- i)1..3表示从 1 到 3 的闭区间.text-{i}通过插值生成.text-1、.text-2、.text-3三个选择器lookup(font-size- i)动态读取对应变量得到 10px/20px/30px。这是“数据驱动样式”的典型写法大量重复的选择器声明被压缩为寥寥数行。定义检查is defined运算符判断变量是否已定义常用于可选配置的防御式编程if ohnoes is defined color: blue只有ohnoes变量存在时color: blue才会被写入输出避免引用未定义变量导致编译异常。False 值在 Stylus 的条件判断中以下值被视为“假”0 null false 即数字0、null、布尔false和空字符串都是 falsy其余值包括空列表按真值处理。理解这一点有助于编写正确的条件分支。类型检查is a运算符用于运行时类型判断可以校验值是否为字符串、标识符、颜色等类型if val is a string if val is a ident if #fff is a rgba // → true第三行值得注意#fff是十六进制颜色但在 Stylus 内部统一表示为 RGBA 颜色模型因此#fff is a rgba结果为true。类型检查常用于编写健壮的自定义函数在入口处校验参数类型。内置函数颜色函数Stylus 内置了完整、可组合的颜色处理函数集无需引入任何外部库。透明度相关alpha(#fff) //→ 1 alpha(rgba(0, 0, 0, 0.2)) //→ 0.2明暗判断dark(black) //→ true light(black) //→ false颜色通道提取hue(#0a0) //→ 50deg saturation(#f00) //→ 100% lightness(#f00) //→ 50% luminosity(#f00) //→ 0.2126单参数调用时hue/saturation/lightness读取对应通道值部分函数支持双参数形式即“取值 设置”二合一hue(#0a0, 0deg) saturation(#f00, 50%) lightness(#f00)调整类函数按幅度修改颜色lighten(color, 10%) darken(color, 10%) saturate(color, 10%) desaturate(color, 10%) invert(color)混合类函数与白/黑混合得到浅色/深色变体tint(color, 50%) // mix with white shade(color, 50%) // mix with black移除引号包裹用于把字符串转成可输出的字面量unquote(string)这些函数可以在任意声明中内联组合例如darken(lighten(#336699, 20%), 5%)是构建主题色板的基础设施。图片尺寸image-size(path)返回给定图片的宽度和高度两个值配合多返回值索引使用width: image-size(tux.png)[0] height: image-size(tux.png)[1]该函数会读取指定路径图片的实际像素尺寸如tux.png常见于需要按图片原始尺寸精确布局的场景。缓存 Cachingcache()内置函数用于消除重复的样式输出。首次调用把内容应用到给定选择器第二次以相同参数调用时会通过extend复用第一次调用生成的选择器size($width) cache(w $width) width: $width .a { size: 10px } .b { size: 10px }// 输出: .a, b { width: 10px }.a与.b都以10px调用size()由于缓存键w10px相同编译结果合并为.a, .b { width: 10px }一个规则显著缩减输出体积。Embed URLembedurl(path)把图片以 base64 编码内联进 CSSbackground: embedurl(logo.png) // → background: url(data:image/png;base64,…)编译后生成data:URI减少 HTTP 请求数适合小体积图标、雪碧图等场景大图内联会显著增加 CSS 体积需按需使用。添加属性add-property(name, expr)允许函数在返回主值的同时“附加”写入额外属性。典型用途是同时输出降级方案与现代属性gradient(color) add-property(background-image, linear-gradient(top, color, darken(color, 20%))) colorbody background: gradient(red)调用gradient(red)时函数返回red赋给background同时通过add-property额外写入background-image: linear-gradient(top, red, darken(red, 20%))。一条声明产出多条属性是优雅的渐进增强封装。sprintf%运算符与s()函数提供类 C 语言的格式化字符串能力-webkit-gradient(%s, %s, %s) % (linear (0 0) (0 100%)) // → -webkit-gradient(linear, 0 0, 0 100%)s(rgba(0, 0, 0, %s), 0.3)模板 % (值列表)按顺序填充%s占位符s(fmt, ...)是等价的函数式写法常用于动态拼接颜色、渐变等需要字符串模板的场景。在 reference 仓库中的位置本篇内容对应仓库中的 docs/stylus.md 备忘清单属于项目“快速参考备忘清单速查表”体系的一部分需要回顾 CSS 基础语法与属性时可对照 CSS 备忘清单想横向比较另一款主流预处理器可查阅 Less.js 备忘清单仓库通过 package.json 中的refs-cli构建工具渲染这些 Markdown 文档并以markdownlint-cli见markdownlint脚本与lint-staged配置统一规范文档格式确保每份速查表的代码示例与排版风格一致。整份清单遵循“一个主题一个区块”的组织方式入门安装与两种语法、Mixins、函数、值、高级控制流、内置函数六大板块层层递进覆盖了 Stylus 从安装到进阶的全部常用能力可直接作为日常开发的速查与参考。赞分享文档知识库教程开发工具【免费下载链接】reference为开发人员分享快速参考备忘清单(速查表)项目地址https://gitcode.com/jaywcjlove/reference点击查看免费下载相关推荐Less.js 备忘清单CSS 预处理器核心语法与内置函数实战速查Less.js 备忘清单CSS 预处理器核心语法与内置函数实战速查 LessLeaner Style Sheets是向后兼容 CSS 的扩展语言本指南以文档教程Elixir 快速参考备忘清单基础语法、集合、模式匹配与函数实战Elixir 快速参考备忘清单基础语法、集合、模式匹配与函数实战 本文以本仓库jaywcjlove/reference面向开发人员的快速参考备忘清单项目文档知识库教程开发工具Quick Reference 备忘清单Less.js 核心语法与内置函数速查指南Quick Reference 备忘清单Less.js 核心语法与内置函数速查指南 LessLeaner Style Sheets 的缩写是一门向后兼容的文档知识库教程开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考