前言
Stylus是一种优雅的CSS预处理器，通过提供变量、嵌套规则、函数、运算符等高级功能，极大简化CSS编写。它支持动态语法和缩进敏感结构，使得代码风格更清晰、简洁。Stylus可以编译成标准CSS，提升开发效率与代码可维护性。
接下来，让我们用手风琴小demo为目的，去深入了解stylus感知css编写的便捷吧！
大致要求是当我们的鼠标划过面积会变大，并且具有慢慢的过渡效果。
准备工作
我们首先建立一个如图所示文件夹。
编译准备部分
全局安装npm i -g stylus，该命令用于全局安装Stylus这一CSS预处理器。通过在命令行中运行此命令，Node.js包管理器（npm）会下载并安装Stylus到你的系统中。这样安装后，你就可以在任何项目中使用Stylus命令来编译Stylus文件为CSS文件，而不仅仅局限于某个特定的项目目录下。
输入stylus common.styl -o commom.css，该命令用于将Stylus格式的样式文件
common.styl编译并输出为CSS格式的文件common.css。在这个过程中，Stylus预处理器会解析common.styl中的变量、嵌套、函数等高级特性，并将其转换为浏览器可识别的CSS代码。（每一步都要我们手动更新）输入stylus -w common.styl -o common.css，该命令用于监视（watch）
common.styl这个Stylus源文件的改动，并自动重新编译为common.css。当你编辑并保存common.styl时，Stylus预处理器会立即检测到变化，并自动生成或更新对应的CSS文件，无需手动重复编译。（实时更新）
界面部分
<!DOCTYPE html> <html> <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
li
flex 1
cursor pointer
transition all 300ms
text-align center
line-height 200px
&:nth-child(1)
background-color #f66
&:nth-child(2)
background-color #66f
&:nth-child(3)
background-color #f90
&:nth-child(4)
background-color #09f
&:nth-child(5)
background-color #9c3
&:nth-child(6)
background-color #3c9
&:hover
flex 2
background-color #ccc
//styl部分
<-------------------------------------------------------->
* {
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: #f66;
}
.accordion li:nth-child(2) {
background-color: #66f;
}
.accordion li:nth-child(3) {
background-color: #f90;
}
.accordion li:nth-child(4) {
background-color: #09f;
}
.accordion li:nth-child(5) {
background-color: #9c3;
}
.accordion li:nth-child(6) {
background-color: #3c9;
}
.accordion li:hover {
flex: 2;
background-color: #ccc;
}
//编译出来的css部分
我们只需要在styl文件里编写样式即可，我们可以发现，styl结构相比传统的css界面要简单很多。具体体现如下：
省去大括号和冒号
用缩进来表示标签基本属性
模块化，我们可以在与父元素属性对齐的地方书写属性，还可以在这里直接书写子元素，省去了我们后代和子代选择器的复杂化，并且我们这样就成为了一个模块，也就是说，我们更改属性时，直接找到这个模块即可，如果是传统的css编写我们可能会写得东一块西一块。
当需要我们表示子代选择器时，我们可以选择与此标签同列的方式进行书写，但是这样的话就不美观，因此，我们可以选择将其标签名改为&的方式然后进行缩进写入此标签属性同列。
css具体效果如下：
我们定义了一个父容器为弹性容器。
子容器平均分配父容器大小，当改变时过渡0.3秒。
结构伪类选择器设置子代颜色。
当鼠标经过时，这个时候经过的元素flex2，相对于剩余的元素是它们的两倍大，并且改变颜色。
这样我们的手风琴小demo就做好啦，并且从中认识到了Stylus给我们带来的便捷！
