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

前言

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

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

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

相关推荐
天天向上102413 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y29 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁36 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry36 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录37 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟38 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan42 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript