前言

在传统的Web开发中，开发者直接编写CSS来设计网页的布局和外观。虽然CSS是构建网页样式的基石，但它的一些局限性，如语法冗长、缺乏变量支持、运算能力有限等，使得开发者在处理复杂样式时效率不高。为了解决这些问题，预处理器应运而生，Stylus就是其中的佼佼者。

正文

什么是stylus

Stylus 是一种强大的、动态的样式语言，它旨在为CSS（层叠样式表）提供更加高效、灵活且富有表现力的编写方式。Stylus 是由Node.js社区开发的，特别适合与Node.js应用程序一起使用，但也可以轻松地应用于任何支持它的web开发项目中。

stylus的特点

简洁的语法：Stylus采用了缩进敏感的语法，类似于Python，这使得代码更为整洁，减少了括号和分号的使用。
强大的可编程性：作为一门真正的编程语言，Stylus支持变量、操作符、函数、嵌套规则、混入（mixins）、继承等高级特性，极大地提高了样式的可维护性和复用性。
实时编译：Stylus可以实时监测源文件的变化并自动编译为CSS，这对于快速迭代的开发环境非常有用。
灵活性：Stylus允许用户选择自己的语法风格，无论是类似于CSS的传统语法，还是完全采用缩进的Python式语法，都能自如应对。
模块化：支持导入其他Stylus文件，方便组织和重用代码，有助于构建大型项目中的样式体系。

为什么使用stylus

提高开发效率：通过变量、函数等特性减少重复代码，加速开发流程。
增强可维护性：结构化的语法和模块化支持使得代码更易于阅读和维护。
创意表达：Stylus的灵活性让开发者能够以更自然、直观的方式书写样式，鼓励创新和实验。
兼容性：虽然Stylus提供了许多现代特性，但它最终会编译成所有浏览器都能理解的标准CSS代码。

我们现在就来使用stylus来完成一道百度的面试题：手风琴界面

手风琴效果是一种常见的UI设计模式，用户点击标题时，内容区域会展开或折叠，同时确保只有一个内容区域处于展开状态，形似手风琴的伸缩动作。本指南将详细介绍如何实现这一效果，并利用Stylus这一高效的CSS预处理器来简化样式编写过程，提升开发效率。

45CYJ0Y8%E[]6RBOJZ)THY1.png

这是一个很简单的页面，我们可以直接写出他的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>

重点就是它的css

为了提高开发效率，增强可维护性，我们运用stylus

我们可以使用命令

stylus -w index.styl -o index.css

让css文件实时监控stylus文件并同步

我们先将页面初始化

*
    margin 0
    padding 0
    box-sizing border-box
ul,li
    list-style: none

为了让这六个元素在同一行，我们将accordion设为水平容器

我们再对子容器li使用flex 1使得容器内容量按比例分配，再给每个容器加上颜色

.accordion
    display flex
    width 600px
    height 200px
    li
        flex 1
        cursor pointer
        line-height 200px
        text-align center
        color white
        &: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

也就是当鼠标移放至某个容器时，该容器弹性占比变为2，使其变大

但是变化的过于生硬，我们要让它如德芙般丝滑

所以设置

transition: flex .5s

将其变化时间设为0.5s

现在就如德芙般丝滑了。

搞定！面试官也被你折服了！

求点赞评论收藏！有问题随时私信博主！

面试你需要懂得那些知识点-手风琴页面展示(stylus)

前言

正文