likes
comments
collection
share

我用stylus实现了一个手风琴效果

作者站长头像
站长
· 阅读数 61

前言

Stylus是一种优雅的CSS预处理器，通过提供变量、嵌套规则、函数、运算符等高级功能，极大简化CSS编写。它支持动态语法和缩进敏感结构，使得代码风格更清晰、简洁。Stylus可以编译成标准CSS，提升开发效率与代码可维护性。

接下来，让我们用手风琴小demo为目的，去深入了解stylus感知css编写的便捷吧！

大致要求是当我们的鼠标划过面积会变大，并且具有慢慢的过渡效果。

我用stylus实现了一个手风琴效果

准备工作

我们首先建立一个如图所示文件夹。

我用stylus实现了一个手风琴效果

编译准备部分

  1. 全局安装npm i -g stylus，该命令用于全局安装Stylus这一CSS预处理器。通过在命令行中运行此命令，Node.js包管理器（npm）会下载并安装Stylus到你的系统中。这样安装后，你就可以在任何项目中使用Stylus命令来编译Stylus文件为CSS文件，而不仅仅局限于某个特定的项目目录下。
  2. 输入stylus common.styl -o commom.css，该命令用于将Stylus格式的样式文件common.styl编译并输出为CSS格式的文件common.css。在这个过程中，Stylus预处理器会解析common.styl中的变量、嵌套、函数等高级特性，并将其转换为浏览器可识别的CSS代码。（每一步都要我们手动更新）
  3. 输入stylus -w common.styl -o common.css，该命令用于监视（watch）common.styl这个Stylus源文件的改动，并自动重新编译为common.css。当你编辑并保存common.styl时，Stylus预处理器会立即检测到变化，并自动生成或更新对应的CSS文件，无需手动重复编译。（实时更新）

界面部分

<!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主体内容

*
  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界面要简单很多。具体体现如下：

  1. 省去大括号和冒号
  2. 用缩进来表示标签基本属性
  3. 模块化，我们可以在与父元素属性对齐的地方书写属性，还可以在这里直接书写子元素，省去了我们后代和子代选择器的复杂化，并且我们这样就成为了一个模块，也就是说，我们更改属性时，直接找到这个模块即可，如果是传统的css编写我们可能会写得东一块西一块。
  4. 当需要我们表示子代选择器时，我们可以选择与此标签同列的方式进行书写，但是这样的话就不美观，因此，我们可以选择将其标签名改为&的方式然后进行缩进写入此标签属性同列。

css具体效果如下：

  1. 我们定义了一个父容器为弹性容器。
  2. 子容器平均分配父容器大小，当改变时过渡0.3秒。
  3. 结构伪类选择器设置子代颜色。
  4. 当鼠标经过时，这个时候经过的元素flex2，相对于剩余的元素是它们的两倍大，并且改变颜色。

这样我们的手风琴小demo就做好啦，并且从中认识到了Stylus给我们带来的便捷！

转载自:https://juejin.cn/post/7377326783581356072
评论
请登录