前言
Stylus 是一种 CSS 预处理器，它扩展了 CSS 的功能，使得编写样式变得更简洁和高效。Stylus 允许使用嵌套、变量、混入等编程功能，这些功能可以极大地提高开发效率和代码的可维护性。下面我将用一个手风琴的小demo带大家认识并学会使用stylus，再在微信源码中学习规范使用stylus和在大厂面试题中灵活运用起来
一：stylus的从0到1
1.1：安装stylus
1： 安装stylus包：npm i -g stylus
创建项目文件夹，将该文件夹在终端中打开，输入安装脚本。如果安装报错，且报错原因为无法运行脚本，打开PowerShell,输入set-ExecutionPolicy RemoteSigned,然后选择:[A]全是，再进入项目终端继续安装
2：生成css文件：stylus common.styl -o common.css
其中common.styl是.styl文件的名字，common.css是我们所熟知的css文件。xx.styl文件写下的代码会在xx.css中正确编译。
3：监听文件变化：stylus -w common.styl -o common.css
这样我们在common.styl 写下的代码会实时编译进 common.css，便捷高效
1.2：使用stylus
先上效果： 
1. html部分
引入css样式
js
<link rel="stylesheet" href="./common.css">添加ul,li列表
js
<ul class="accordion">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>2. 样式部分
- stylus 让css拥有各项编程能力，在嵌套 + 模块化能力上有明显体现
设置全局样式，Stylus 允许省略分号和大括号，利用缩进来表示嵌套结构， 当然如果你愿意，也可以使用大括号和分号
js
*
margin 0
padding 0
ul,li
list-style none设置容器样式： Stylus 支持样式的嵌套，使得样式表更具层次感和组织性
- 使用弹性布局和子元素flex比例分配实现等比例以及两倍比例
- 使用hover状态，修改相应li的flex：2
- li上设置css，transition过渡动画
- 使用：nth-child设置不同元素的颜色
js
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就快速完成了这个手风琴效果
二：微信源码中的stylus
2.1：html部分
-
语义化标签的使用：
- 代码使用了
div标签作为容器，h1标签表示标题，p标签表示描述。有助于提高 HTML 的可读性和结构性，便于搜索引擎优化（SEO）和辅助技术（如屏幕阅读器）的解析。
- 代码使用了
-
类名的命名规范：
- 类名采用了
page,page_hd,page_title等具有明确意义的名称，使得样式和结构一目了然，有助于团队协作和代码维护。开发过程中要尽量避免使用无意义的类名如block和element，这会使代码的结构模糊不清。
- 类名采用了
js
<!-- Block -->
<div class="page">
<!-- Element _ -->
<div class="page_hd">
<h1 class="page_title">List</h1>
<p class="page_desc">列表</p>
</div>
<div class="page_bd">
<!-- tb tm pdd 组件 cells block-->
<div class="weui-cells_title">带说明的列表项</div>
<div class="weui-cells">
<!-- block weui-cell -->
<div class="weui-cell">
<div class="weui-cell_hd">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=
" alt="">
</div>
<div class="weui-cell_bd">
<p>标题文字</p>
</div>
<div class="weui-cell_ft">
说明文字
</div>
</div>
</div>
</div>
</div>2.2：样式部分
-
outline：做到border一样的效果，但是不影响例子模型，轮廓。
-
自定义属性的使用 ：
:root选择器定义了一个 CSS 自定义属性--weui-BG-0，用于设置背景颜色，提高了代码的灵活性和可维护性，使得颜色或其他属性可以统一管理和修改。 -
字体和高亮样式 ：
font-family属性定义了系统字体系列，包含了-apple-system苹果字体，全方位照顾顾客使用感。webkit-tap-highlight-color属性被设置为transparent，用于去除移动设备上点击高亮的效果，提高用户体验。其中webit是浏览器内核， android、ios 用的是webkit，PC、firefox 、edge不是webkit -
布局和滚动优化 ：
.page类定义了页面的布局，使其充满整个视口并支持垂直滚动。-webkit-overflow-scrolling: touch属性提升了触摸设备上的滚动体验，使其更加流畅，界面滑动也更贴合手势。
js
*
margin 0
padding 0
outline 1px solid rgb(216, 28, 28)
:root{
--weui-BG-0 #9f2929
}
body
font-family system-ui, -apple-system, sans-serif
body,html
height 100%
-webkit-tap-highlight-color transparent
page,body
background-color var(--weui-BG-0)
.page
position absolute
top 0
left 0
right 0
bottom 0
overflow-y auto
-webkit-overflow-scrolling touch三：腾讯面试中的stylus
题目：用纯 CSS 实现手风琴式菜单
题目描述：用纯 CSS 来实现一个手风琴式菜单（Accordion Menu），在没有 JavaScript 的情况下，实现点击切换内容的功能。
思路：通过使用隐藏的复选框和关联的标签，点击标签可以切换复选框的状态，而 CSS 则根据复选框的状态调整内容的显示或隐藏，从而实现点击切换内容的效果。 简单分析之后，开始动手实践吧。
3.1：html部分
-
input元素：三个隐藏的复选框用于控制每个折叠菜单的展开和收起。 -
label元素 ：用于点击时切换对应的input状态，进而控制内容的显示。 -
article元素 ：相当于div推荐使用 HTML5 语义化标签提高 SEO 和可读性。
js
<div class="accordion">
<input type="checkbox" id="collapse1" hidden>
<input type="checkbox" id="collapse2" hidden>
<input type="checkbox" id="collapse3" hidden>
<!-- div替代品,html5 语义化标签 SEO比较重要-->
<article>
<label for="collapse1">列表1</label>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</article>
<article>
<label for="collapse2">列表2</label>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</article>
<article>
<label for="collapse3">列表3</label>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</article>
</div>3.2：样式部分
-
article样式 ：每个article元素设置cursor: pointer，让用户知道这些元素是可点击的。& + article选择器为每个article元素与其兄弟元素之间添加 5px 的间距。 -
input元素控制内容显示 ：input元素使用:nth-child(n):checked伪类选择器和相邻同层选择器 (~) 控制对应的p元素的样式。当复选框被选中时，相应的p元素的max-height被设置为 1000px，实现展开效果。 -
p元素样式 ：初始时，p元素的max-height为 0，内容被隐藏。通过transition属性实现平滑的展开和收起效果。overflow: hidden确保内容在展开和收起时不出现滚动条。
js
*
margin 0
padding 0
.accordion
width 300px
article
cursor pointer
& + article
margin-top 5px
input
&:nth-child(1):checked ~ article:nth-of-type(1) p,
&:nth-child(2):checked ~ article:nth-of-type(2) p,
&:nth-child(3):checked ~ article:nth-of-type(3) p
max-height 1000px
label
display block
height 40px
padding 0 20px
background-color #f66
cursor pointer
line-height 40px
font-size 16px
color #fff
p
overflow hidden
padding 0 20px
border 1px solid #f66
border-top none
border-bottom-width 0
max-height 0
line-height 30px
transition all 500ms3.3：知识点get
高级 CSS 选择器：
+兄弟选择器 ：选择紧随其后的兄弟元素。用于设置article元素之间的间距。~相邻同层选择器：选择在指定元素之后的同层兄弟元素，用于控制内容的显示。:checked伪类选择器 ：用于选中状态的元素，适用于checkbox和radio元素。:nth-child(n)和:nth-of-type(n)：选择第 n 个子元素或同类型的第 n 个子元素。
四：总结
Stylus 的优势
- 简洁性和可读性: Stylus 的嵌套功能使得 CSS 代码更加简洁易读。通过缩进代替大括号，减少了样式文件的复杂度，使得维护和阅读代码变得更加直观。
- 功能强大: Stylus 提供了丰富的功能，如变量、混入、函数等，使得 CSS 编写更具编程能力。这些特性不仅减少了重复代码，还提高了样式表的复用性和可维护性。
- 高效的开发体验: Stylus 支持自动编译和实时监控文件变化，帮助开发者快速看到样式更改的效果。这种高效的开发流程减少了开发时间，提高了生产力。
实践建议
- 熟练掌握 Stylus 的语法和功能: 理解并运用 Stylus 的各种特性，如嵌套、变量、混入等，可以显著提升你的样式表的编写效率和质量。
- 关注代码可维护性: 尽管 Stylus 提供了强大的功能，但编写清晰、易于维护的代码依然至关重要。使用模块化的方式组织样式，避免样式冲突，提升代码的可读性。