stylus - 新一代CSS预处理框架

Stylus 是一种新一代的 CSS 预处理器框架，扩展了 CSS 的功能，支持嵌套、变量、混入等编程特性，旨在提升开发效率和代码可维护性。

• 起源：Stylus 诞生于 2010 年，源自 Node.js 社区，专为 Node 项目提供 CSS 预处理支持。尽管其人气不如 Sass 和 LESS，但在特定场景下仍被广泛使用。
• 核心特性：

  动态生成 CSS：通过高效、表达性强的语法生成浏览器可识别的 CSS。

  灵活的语法：支持缩进或常规 CSS 书写规则，开发者可根据习惯选择。

  编程能力：引入变量、逻辑、函数等编程特性，使 CSS 更简洁、适应性更强。

1. 嵌套规则

   通过缩进或大括号嵌套选择器，减少重复代码，提升可读性。

   示例：

   .accordion li flex 1 &:hover flex 2

2. 变量与混入

   变量：存储颜色、尺寸等重复值，便于统一修改。

   primary-color = #51100bli:nth-child(1) background-color primary-color

   混入（Mixin）：复用一组样式规则，支持参数传递。

   border-radius(val) -webkit-border-radius val border-radius val

3. 函数与运算

   支持数学运算（加减乘除）、颜色操作（如透明度调整）和条件逻辑。

   示例：

   body padding (10px / 2) background lighten(#51100b, 20%)

4. 自动编译与监听

   安装：通过 npm 全局安装 Stylus 包。

   npm i -g stylus

   编译文件：将 .styl 文件转换为 .css。

   stylus common.styl -o common.css

   实时监听：文件修改后自动重新编译。

   stylus -w common.styl -o common.css

• 与 Sass/SCSS 对比：

  Stylus 语法更简洁（可省略分号和大括号），而 Sass 更接近 CSS 语法。

  Sass 社区更庞大，工具链更成熟；Stylus 在 Node.js 生态中集成更紧密。

• 与 LESS 对比：

  Stylus 功能更丰富（如更灵活的变量作用域），LESS 语法更接近原生 CSS。

1. 语法选择：

   偏好简洁语法时，使用缩进风格；需兼容传统 CSS 时，保留大括号和分号。

2. 模块化组织：

   将样式拆分为多个 .styl 文件，通过 @import 引入，避免单文件过大。

3. 性能优化：

   利用变量和混入减少重复代码，结合压缩工具（如 stylus --compress）生成生产环境文件。

4. 调试技巧：

   使用 stylus --line-numbers 生成带行号的 CSS，便于定位问题。

1. HTML 结构：

   <ul class="accordion"> <li>1</li> <li>2</li> <li>3</li></ul>

2. Stylus 样式：

   * margin 0 padding 0.accordion display flex width 600px height 200px li flex 1 cursor pointer transition all 300ms text-align center line-height 200px &:nth-child(1) background-color #51100b &:hover flex 2 background-color #fff

3. 效果：

   鼠标悬停时，li 宽度从 flex: 1 变为 flex: 2，背景色变化。

   通过 nth-child 为每个子元素设置不同背景色。

Stylus 以其简洁的语法、强大的功能和高效的开发体验，成为 CSS 预处理器的有力竞争者。通过嵌套、变量、混入等特性，开发者可以编写更清晰、易维护的样式代码。尽管其社区规模不及 Sass，但在 Node.js 生态中仍具有独特优势。对于追求高效开发和代码简洁性的项目，Stylus 是一个值得尝试的选择。