使用Stylus实现CSS手风琴菜单：腾讯面试中的HTML5语义化与交互设计
前言
最近沉迷于CSS无法自拔，在传统的编写css代码时必须要将css代码的花括号{}, 分号; , 冒号: 这些符号全都编写出来，在某些场景下这种编程风格效率低下而且还不能使代码模块化后期维护起来相当复杂。正当我苦恼之时，发现了一种新的编程风格--stylus。
什么是stylus
在前端开发中，CSS预处理器可以极大地提高开发效率和代码质量。Stylus是一种强大的CSS预处理器，它提供了丰富的功能和灵活的语法，能让开发者写出更优雅、可维护的CSS代码。用stylus编写CSS代码非常简洁，效果请看图:
是不是很优雅，用stylus编写css代码时不需要使用花括号，冒号和分号，只需要缩进就可以完成各级元素的嵌套。
stylus的安装
在项目的终端中输入指令 npm i -g stylus
若出现此报错:
需要以管理员身份打开Windows PowerShell 输入指令set-ExecutionPolicy RemoteSigned
选择信任该脚本Y
执行完该操作后，再次来到项目的终端，输入指令npm i -g stylus，安装stylus，输入指令stylus --version若出现stylus版本信息则安装成功。
stylus的基本使用
1. stylus xxx.styl -o xxx.css
创建一个stylus文件，文件后缀为styl。在该styl文件中输入一些内容:
然后来到项目终端输入指令 stylus test.styl -o test.css,可以发现在同级目录下自动生成了test.css文件，并拥有css属性。
这样编写css代码是不是很优雅？下面我将为大家介绍一个指令，让你编写stylus时更加优雅。
2. stylus -w xxx.styl -o xxx.css 在原有的基础上加了 -w 也即watch，监听
以上述为例，当我们在终端输入这段代码后，每次更新styl时只需保存，对应的css文件内容也会自动更新，这样就不需要我们每次更新styl文件后又去终端输入指令stylus xxx.styl -o xxx.css来同步css文件内容。
这样就能实时监控styl代码了，是不是非常的优雅？
腾讯面试题的stylus实战
需求
如何使用纯css实现手风琴菜单，不能使用JS。实现效果如下:
实现过程
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./demo.css">
<title>纯css菜单</title>
</head>
<body>
<div class="accordion">
<input type="checkbox" id="collapse1" hidden>
<input type="checkbox" id="collapse2" hidden>
<input type="checkbox" id="collapse3" hidden>
<!-- (article>label+p*4)*3 -->
<!-- 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>
</body>
</html>
上述HTML代码构建了一个纯CSS控制的手风琴菜单功能。它包含一个手风琴容器div，内部有三个article区块，每个区块通过与之关联的隐藏checkbox输入控件来实现展开和闭合的功能。每个区块的标题通过label标签定义，并与相应的checkbox绑定，用户点击标签时会切换复选框状态，进而通过CSS改变关联内容的显示状态，实现了不依赖JavaScript的简洁交互设计。
用stylus编写css代码
stylus代码与对应的css代码对比如下:
在该例中可以体现出用stylus编写css代码的几大优点:
1. 简洁性和可读性
stylus支持缩进语法，可以减少花括号的使用，让代码变得更加简洁易读，效果可参考上图。
2. 嵌套规则
在上述代码中如: .accrodion article 这种的嵌套语法，可以直观地反映出元素之间的层次关系，减少选择器的重复编写使得css的结构更为清晰，易于维护。
手风琴菜单的CSS实现原理
实现该功能的关键代码为:
.accordion input:nth-child(1):checked~article:nth-of-type(1) p,
.accordion input:nth-child(2):checked~article:nth-of-type(2) p,
.accordion input:nth-child(3):checked~article:nth-of-type(3) p {
max-height: 600px;
}
理解这段代码，关键在于4个部分:
1. 组合选择器: input:nth-child(1)
input:nth-child(1) : 这部分选择器是针对 input 元素的，它必须是其父元素（即 .accordion 中的子元素）的第一个孩子且该孩子的类型为inpput（nth-child(1)）。由于手风琴中隐藏的复选框有三个子元素，这里指的是第一个复选框。
2. 伪类选择器:checked
表示该 input 元素必须处于被选中（checked）状态。这意味着用户已经点击了与这个输入元素关联的标签，从而改变了状态。
3. 相邻同层选择器: ~
这个符号表示选择器后面的部分（article:nth-of-type(1)）是在同一个父元素下的同级元素，但不必直接相邻。在该例子中也就表示input标签 管着哪个article标签。
4. :nth-of-type选择器
这部分选择器是针对 article 元素的，它必须是其父元素（即 .accordion 中的子元素）的第一个 article 子元素（nth-of-type(1)）。在手风琴结构中，这意味着第一个可折叠的内容区域。(其余几个标签原理与此一致)
综合来看，这段代码的执行过程是：当.accordion容器内的第一个input元素被选中时，它会匹配并应用样式给第一个article元素内的所有p元素。当点击某个标题（与input关联）时，展开或关闭相应的内容（p元素）。
本篇文章就到此为止啦，希望通过这篇文章能对你理解stylus的基本写法与优点有所帮助，本人水平有限难免会有纰漏，欢迎大家指正。如觉得这篇文章对你有帮助的话，欢迎点赞收藏加关注，感谢支持🌹🌹。
转载自:https://juejin.cn/post/7376999346753847311