前言
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
这样我们实现了上述手风琴模型。
文章到此,就结束了,感谢大家阅读本文,若有不足,恳请指出,谢谢大家!!