stylus - 新生代CSS预处理框架

更成痒 · 2025-6-6 08:45:07

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 >
<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)

复制代码

以上，我们通过stylus就快速完成了这个手风琴效果
高级 CSS 选择器：

- 兄弟选择器：选择紧随其后的兄弟元素。用于设置 article 元素之间的间距。
~ 相邻同层选择器：选择在指定元素之后的同层兄弟元素，用于控制内容的显示。
:checked 伪类选择器：用于选中状态的元素，适用于 checkbox 和 radio 元素。
:nth-child(n) 和 :nth-of-type(n) ：选择第 n 个子元素或同类型的第 n 个子元素。

实践建议

熟练掌握 Stylus 的语法和功能: 理解并运用 Stylus 的各种特性，如嵌套、变量、混入等，可以显著提升你的样式表的编写效率和质量。
关注代码可维护性: 尽管 Stylus 提供了强大的功能，但编写清晰、易于维护的代码依然至关重要。使用模块化的方式组织样式，避免样式冲突，提升代码的可读性。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

stylus - 新生代CSS预处理框架

相关帖子

浏览过的版块

签约作者

stylus - 新生代CSS预处理框架

相关帖子

相关推荐

浏览过的版块

签约作者