stylus：让我们重新认识css

前言

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样式

<link rel="stylesheet" href="./common.css">

添加ul,li列表

<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 允许省略分号和大括号，利用缩进来表示嵌套结构， 当然如果你愿意，也可以使用大括号和分号

*
    margin 0
    padding 0

ul,li
    list-style none

设置容器样式： Stylus 支持样式的嵌套，使得样式表更具层次感和组织性

• 使用弹性布局和子元素flex比例分配实现等比例以及两倍比例
• 使用hover状态，修改相应li的flex：2
• li上设置css，transition过渡动画
• 使用：nth-child设置不同元素的颜色

  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，这会使代码的结构模糊不清。

 <!-- 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 属性提升了触摸设备上的滚动体验，使其更加流畅，界面滑动也更贴合手势。

*
    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 和可读性。

 <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 确保内容在展开和收起时不出现滚动条。

*
    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 500ms

3.3：知识点get

高级 CSS 选择器：

• + 兄弟选择器 ：选择紧随其后的兄弟元素。用于设置 article 元素之间的间距。
• ~ 相邻同层选择器：选择在指定元素之后的同层兄弟元素，用于控制内容的显示。
• :checked 伪类选择器 ：用于选中状态的元素，适用于 checkbox 和 radio 元素。
• :nth-child(n) 和 :nth-of-type(n) ：选择第 n 个子元素或同类型的第 n 个子元素。

四：总结

Stylus 的优势

1. 简洁性和可读性: Stylus 的嵌套功能使得 CSS 代码更加简洁易读。通过缩进代替大括号，减少了样式文件的复杂度，使得维护和阅读代码变得更加直观。
2. 功能强大: Stylus 提供了丰富的功能，如变量、混入、函数等，使得 CSS 编写更具编程能力。这些特性不仅减少了重复代码，还提高了样式表的复用性和可维护性。
3. 高效的开发体验: Stylus 支持自动编译和实时监控文件变化，帮助开发者快速看到样式更改的效果。这种高效的开发流程减少了开发时间，提高了生产力。

实践建议

• 熟练掌握 Stylus 的语法和功能: 理解并运用 Stylus 的各种特性，如嵌套、变量、混入等，可以显著提升你的样式表的编写效率和质量。
• 关注代码可维护性: 尽管 Stylus 提供了强大的功能，但编写清晰、易于维护的代码依然至关重要。使用模块化的方式组织样式，避免样式冲突，提升代码的可读性。