我的第一次（滑稽）SCSS之旅——实现一下简单的手风琴式的图片展示

上个博客写了一下SASS的一些配置

我现在来试试这个东西
首先这个东西跟less比，功能只会强大不会比less
$ 可以定义变量，可以在其中使用
& 代表当前元素的父节点
嵌套里面继续选择元素，代表是当前代码块（也就是一对花括号包括的一部分代码）的元素节点中的字节点钟选择新的节点，这点是跟less相似的
那么就可以在代码块中有这种操作&::after 还有 &:hover 代表的都是当前代码块元素的一些新的特点悬停啊之类的
那么我实现个简单的手风琴式的一个图片展示

思路如下

以横向的列表展示图片，不排除有大小不一的情况出现，也就是溢出的不展示
然后固定大小展示，显示图片中间的内容
不被悬停只展示一部分
然后悬停放大
有慢慢放大的动画
transtion很容易想到了，这是个重要点吧
标题我想展示到中间并且大小要大浮动到上面，可以想到z-index
放大展示后要有阴影表示选中嘛

代码

看到以上思路大概你们应该会有个大致代码的想法（包括我）
于是我现在得到了如下的scss代码

.accordion-container{
   
  overflow: hidden;//溢出的不展示
  display: flex;//伸缩盒子展示
  justify-content: flex-start;//以伸缩开始的地方对齐
  align-items: flex-start;
  .accordion-item{
   
    list-style: none;//取消列表默认样式
    height: 500px;//高度
    transition: width 0.5s;//动画嘛
    background-size: cover;
    background-repeat:no-repeat;//可以百度，比我注释的清楚吧？
    background-position: center center;
    position: relative;//相对位置
    display: flex;
    justify-content: center;
    align-items: center;
    &:not(:hover){
   
      width: 20%;//item不被悬停的时候只展示20%宽度
    }
    &:hover{
   
      width: 800px;//悬停的时候800px
      &::after{
   
        opacity: 1;
      }
    }
    &::after{
   //为后面添加元素背景也就是添加阴影嘛
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;//绝对定位
      left: 0<