html - 我可以在关键帧内的元素上指定 ID 以使用 sass 减少 CSS 吗？

Question

我确定这是一个新手问题，但我最近才开始在我的元素中实现 sass，我想知道是否有更简单/更有效的方法来使用 sass 实现此代码 - 谢谢为您提供帮助:)。

我想分组，这样我就可以通过 ID 识别 100% 关键帧的宽度，而不是为每个重写动画线和关键帧。

span.underline {
  display:block;
  width:calc(100% - 130px);
  height:2px;
  background-color:transparent;
  position:absolute;
  left:41px;
}

#topNav .dropdown-menu>li>a:hover > span.underline#acctInfo {
  animation: acctInfo 0.3s ease-out forwards;
   background: #FFF;
}

@keyframes acctInfo {
  0% { 
    width:0;
  }
  100% { 
    width:calc(100% - 130px);
  }
}

#topNav .dropdown-menu>li>a:hover > span.underline#replenish {
  animation: replenish 0.3s ease-out forwards;
   background: #FFF;
}

@keyframes replenish {
  0% { 
    width:0;
  }
  100% { 
    width:calc(100% - 60px);
  }
}

#topNav .navbar-nav>li>a:hover > span.underline#more {
  animation: more 0.3s ease-out forwards;
   background: #FFF;
}

@keyframes more {
  0% { 
    width:0;
  }
  100% { 
    width:calc(100% - 65px);
  }
}

Answer 1

这并不容易，我找不到提取 id 选择器的方法。我拥有的最多的是一个 mixin，我将 id 名称作为参数传递。我还尝试从 $name 变量中获取 id 以添加到 mixin 中，无需在选择器中写入，但我得到了两次选择器(有和没有 id).

SASS

@mixin animation($name) {
  animation: $name 0.3s ease-out forwards;
  @keyframes #{$name} {
    0% {
      width: 0;
    }
    100% {
      @if $name=="replenish" {
        width: calc(100% - 60px);
      }
      @else if $name=="more" {
        width: calc(100% - 65px);
      }
    }
  }
}

#topNav .dropdown-menu>li>a:hover > span.underline#replenish {
  @include animation(replenish);
  background: #FFF;
}

#topNav .dropdown-menu>li>a:hover > span.underline#more {
  @include animation(more);
  background: red;
}

输出

#topNav .dropdown-menu > li > a:hover > span.underline#replenish {
  animation: replenish 0.3s ease-out forwards;
  background: #FFF;
}
@keyframes replenish {
  0% {
    width: 0;
  }
  100% {
    width: calc(100% - 60px);
  }
}
#topNav .dropdown-menu > li > a:hover > span.underline#more {
  animation: more 0.3s ease-out forwards;
  background: red;
}
@keyframes more {
  0% {
    width: 0;
  }
  100% {
    width: calc(100% - 65px);
  }
}