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>
- * {
- 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)
高级 CSS 选择器：
- 兄弟选择器：选择紧随其后的兄弟元素。用于设置 article 元素之间的间距。
- ~ 相邻同层选择器：选择在指定元素之后的同层兄弟元素，用于控制内容的表现。
- :checked 伪类选择器：用于选中状态的元素，实用于 checkbox 和 radio 元素。
- :nth-child(n) 和 :nth-of-type(n) ：选择第 n 个子元素或同范例的第 n 个子元素。
实践建议
纯熟把握 Stylus 的语法和功能: 理解并运用 Stylus 的各种特性，如嵌套、变量、混入等，可以显著提升你的样式表的编写效率和质量。
关注代码可维护性: 尽管 Stylus 提供了强大的功能，但编写清晰、易于维护的代码依然至关紧张。利用模块化的方式构造样式，制止样式冲突，提升代码的可读性。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
|
发表于 2025-6-14 14:15:51
