stylus - 新生代CSS预处理框架

news2025/7/28 3:55:41

stylus是什么

Stylus 是一种 CSS 预处理器，它扩展了 CSS 的功能，使得编写样式变得更简洁和高效。Stylus 允许使用嵌套、变量、混入等编程功能，这些功能可以极大地提高开发效率和代码的可维护性。

stylus中文文档

https://stylus.uihtm.com

Stylus背景介绍

Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。

Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。

到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。

stylus使用

安装stylus

## 安装stylus包：
npm i -g stylus

生成css文件：stylus common.styl -o common.css
其中common.styl是.styl文件的名字，common.css是我们所熟知的css文件。xx.styl文件写下的代码会在xx.css中正确编译。
监听文件变化：stylus -w common.styl -o common.css
这样我们在common.styl 写下的代码会实时编译进 common.css，便捷高效

总结

Stylus 的优势

简洁性和可读性: Stylus 的嵌套功能使得 CSS 代码更加简洁易读。通过缩进代替大括号，减少了样式文件的复杂度，使得维护和阅读代码变得更加直观。
功能强大: Stylus 提供了丰富的功能，如变量、混入、函数等，使得 CSS 编写更具编程能力。这些特性不仅减少了重复代码，还提高了样式表的复用性和可维护性。
高效的开发体验: Stylus 支持自动编译和实时监控文件变化，帮助开发者快速看到样式更改的效果。这种高效的开发流程减少了开发时间，提高了生产力。

stylus实例

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <ul class="accordion">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

传统css部分：

* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.accordion {
  display: flex;
  width: 600px;
  height: 200px;
}
.accordion li {
  flex: 1;
  cursor: pointer;
  transition: all 300ms;
  text-align: center;
  line-height: 200px;
}
.accordion li:nth-child(1) {
  background-color: #51100b;
}
.accordion li:nth-child(2) {
  background-color: #7e1212;
}
.accordion li:nth-child(3) {
  background-color: #8b3a3a;
}
.accordion li:nth-child(4) {
  background-color: #9b5757;
}
.accordion li:nth-child(5) {
  background-color: #cf8080;
}
.accordion li:nth-child(6) {
  background-color: #f1bfbf;
}
.accordion li:hover {
  flex: 2;
  background-color: #fff;
}

效果图：

Stylus改写样式

stylus 让css拥有各项编程能力，在嵌套 + 模块化能力上有明显体现
设置全局样式，Stylus 允许省略分号和大括号，利用缩进来表示嵌套结构，当然如果你愿意，也可以使用大括号和分号

*
    margin 0
    padding 0

ul,li
    list-style none

设置容器样式：

Stylus 支持样式的嵌套，使得样式表更具层次感和组织性

使用弹性布局和子元素flex比例分配实现等比例以及两倍比例
使用hover状态，修改相应li的flex：2
li上设置css，transition过渡动画
使用：nth-child设置不同元素的颜色

  li
        flex 1
        cursor pointer
        transition all 300ms
        text-align center
        line-height 200px
        &:nth-child(1)
            background-color rgb(81, 16, 11)
        &:nth-child(2)
            background-color rgb(126, 18, 18)
        &:nth-child(3)
            background-color rgb(139, 58, 58)
        &:nth-child(4)
            background-color rgb(155, 87, 87)
        &:nth-child(5)
            background-color rgb(207, 128, 128)
        &:nth-child(6)
            background-color rgb(241, 191, 191)
        &:hover
            flex 2
            background-color rgb(255, 255, 255)