掌握 Stylus：让 CSS 编写效率倍增的预处理器

在前端开发中，CSS 作为样式定义的基础语言，其编写效率和可维护性直接影响项目开发效率。而 Stylus 作为一款强大的 CSS 预处理器，凭借其简洁的语法和丰富的特性，成为提升 CSS 开发体验的利器。本文将带你深入了解 Stylus 的优势与用法，助你快速掌握这一高效工具。

什么是 Stylus？

Stylus 是一门富有表现力的 CSS 预处理器，它在传统 CSS 的基础上扩展了诸多实用功能，如变量、函数、混合（mixins）、嵌套等。这些特性不仅能大幅减少重复代码，还能让样式结构更加清晰，显著提升 CSS 的编写效率和可维护性。

需要注意的是，浏览器无法直接解析 Stylus 代码，因此必须将其编译为标准 CSS 后才能在网页中使用。

快速开始：安装与编译

安装 Stylus

通过 npm 可以轻松全局安装 Stylus：

bash

css 复制代码

npm i -g stylus

编译 Stylus 文件

将 Stylus 文件编译为 CSS 文件的基本命令：

bash

复制代码

stylus style.styl -o style.css

若需要实时编译（边写边编译），可使用 watch 模式：

bash

复制代码

stylus style.styl -o style.css -w

Stylus 的核心优势

简洁的语法

相比传统 CSS，Stylus 语法更为简洁，可省略大括号、冒号和分号：

stylus

arduino 复制代码

// Stylus 写法
.card
    width 45px
    height 45px

编译后生成的 CSS：

css

css 复制代码

.card {
    width: 45px;
    height: 45px;
}

强大的嵌套功能

Stylus 支持选择器嵌套，使样式结构与 HTML 结构保持一致，增强代码的可读性和维护性：

stylus

scss 复制代码

.panel
    background #fff
    padding 10px
    
    &.active  // 表示与上级选择器同一级的 .panel.active
        border 1px solid #000
        
    .title
        font-size 16px

提升 CSS 的编程能力

Stylus 为 CSS 增添了编程特性，包括变量定义、函数、混合等，同时提供了模块化能力和作用域控制，还能自动为 CSS 属性添加浏览器前缀，解决兼容性问题。

实用布局与动画技巧

弹性布局（Flexbox）

弹性布局是移动端布局的主流方案，通过以下属性可实现灵活的父子元素布局：

display: flex：创建弹性布局上下文
子元素会失去块级元素默认的换行特性，适合多列布局
主轴对齐：justify-content
侧轴对齐：align-items
主轴方向：flex-direction（默认 row 水平方向，可选 column 垂直方向）
子元素设置 flex: 1 可实现等比例分配空间

过渡动画（Transition）

相比 animation，transition 更简单，无需定义 keyframes，可直接为属性变化添加过渡效果：

stylus

scss 复制代码

.element
    transition all 700ms ease-in  // 所有属性变化，700ms 过渡时间，ease-in 缓动函数
    
    // 也可指定单个属性及延迟时间
    transition opacity 300ms ease-in 400ms  // 延迟 400ms 后开始，300ms 完成透明度过渡

响应式布局（媒体查询）

通过 @media 可实现不同设备的适配：

stylus

arduino 复制代码

// 针对宽度小于等于 480px 的设备（如 iPhone 等移动设备）
@media (max-width: 480px)
    .container
        width 100%
        padding 5px

总结

Stylus 作为一款优秀的 CSS 预处理器，通过简化语法、增加编程特性和提供丰富功能，极大地提升了 CSS 开发效率。无论是小型项目还是大型应用，使用 Stylus 都能让样式代码更加简洁、可维护性更强。掌握 Stylus，将为你的前端开发工作带来显著的效率提升。