前言

Stylus是一个css的预处理器，它为css添加了许多的高级功能，让css代码更加的模块化，可维护和易于编写。在本文中Virtual09将会以一个手风琴的模型带领大家领略一番Stylus的独特魅力。手风琴模型的效果如下：

正文

安装Stylus

我们创建一个文件夹并用Vscode打开，我们打开终端输入

css 复制代码

npm i -g stylus

这里这个-g表示全局安装，安装之后我们创建一个叫做common.styl的文件

然后我们回到终端，我们来看看两条指令

stylus common.styl -o common.css
stylus -w  common.styl -o common.css

这两句指令就是多一个-o的区别，但是实际作用的区别大嘛？我们看看第一句stylus common.styl -o common.css,这句话可以帮我们我们写的common.styl文件编译成一个common.css文件。什么，这么酷！对吧，我也觉得。然后呢stylus -w common.styl -o common.css它也可以把我们的common.styl文件编译成common.css文件，二者唯一的不同的是stylus -w common.styl -o common.css可以实时监听我们的common.styl文件，只要它里面的代码变化了，我们的common.css文件也会随着变化，这样的好处就是我们不用每一次写完common.styl文件，再将其编译成common.css了。说了半天，Stylus它的好处在哪里呢？它的好处是，Stylus的语法设计的非常灵活，可以省略一些通常需要的符号，比如分号、括号和冒号，这使得 Stylus 代码看起来比原生 CSS 更加简洁。

效果实现

创建一个html文件，然后将Stylus编译出来的common.css文件引入到html文件中.这里我们手风琴一共有六个盒子，这里我选择使用ul+li实现六个盒子

xml 复制代码

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

这里让我们来聊一聊li的缩放问题。我们一共有六个li,每当我们鼠标移动到某一个li的上方时，该li的宽度就会改变，这是如何实现的呢？首先，我们让6个li水平分布，就不得不提起flex弹性布局，可以让6个li水平分布，那么如何实现li的父容器宽度不变，而目标li宽度变宽呢？我们来看看flex它的本体长什么样呢？flex其实是由flex-grow,flex-shrink,flex-basis三个属性的简写
flex-grow: 控制元素如何填充剩余空间。
flex-shrink: 控制元素如何缩小以适应可用空间。
flex-basis: 指定元素的初始大小。

所以flex是可以接受三个参数的flex:grow shrink basis.

知道这些之后，我们就可以很好的控制li的宽度放大，因为我们知道，当我们给li设置了flex:1的时候，每一个li都会均分父容器的宽度，但是呢如果某一个li的宽度又是如何分配的呢？那么假设，li放大的倍数为2,那么就会是这种解决方案，先让目标li的宽度变成自身的2倍之后，再由父容器的宽度减去放大后的目标li的宽度，父容器再把剩余的宽度一一均匀分配给剩下的5个li.

理论依据讲完了，现在我们就开始开敲代码了！

来到common.styl. 我们先去除内外边距,以及设置ul,li的样式为none

写完这些我们看看common.css中里面会有什么吧.

看吧。妥妥的给我们编译好了。下面我们给父容器ul设置为弹性，宽600px高200px,然后li的样式就是初始每个li均匀分布flex 1,加一个鼠标样式cursor pointer,然后内容居中，加一个样式过渡transition: all 300ms;这里我们每个li的颜色都不同，我们直接选定li的第几个孩子来进行颜色渲染&:nth-child(1) background-color #f66这里的&表示引用当前选择器，也就是引入了li该代码等效于li:nth-child(1) background-color #f66,最后添加一个鼠标悬浮，修改样式

css 复制代码

&:hover
            flex 2
            background-color: #ccc

完整代码：

scss 复制代码

*
    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 rgb(247, 58, 58)
        &:nth-child(3)
            background-color rgb(56, 183, 200)
        &:nth-child(4)
            background-color rgb(47, 196, 131)
        &:nth-child(5)
            background-color rgb(147, 245, 140)
        &:nth-child(6)
            background-color rgb(147, 217, 26)
        &:hover
            flex 2
            background-color: #ccc

这样我们实现了上述手风琴模型。

文章到此，就结束了，感谢大家阅读本文，若有不足，恳请指出，谢谢大家！！

让我们一起来领略高效界面开发stylus的独特魅力吧！！

前言

正文

安装Stylus

效果实现