CSS不适用于特定的类名

Question

我有一个类名，里面有双破折号。问题是CSS不适用于该类。

班级为.menu--dropdown--item--link，LESS为：

.menu {
  &--dropdown {
    &--item {
      &--link {
        width: 100%;
        height: auto;
        line-height: 28px;
        padding: 10px 15px;
        display: inline-flex;
      }
    }
  }
}

这就是这个：

.menu--dropdown--item--link {
  width: 100%;
  height: auto;
  line-height: 28px;
  padding: 10px 15px;
  display: inline-flex;
}

这是HTML：

<ul class="menu--dropdown dropdown-menu icon-w-text" role="menu">
  <li class="menu--dropdown--item ">
    <a class="menu--dropdown--item--link" href="http://www.socialdeal.nl.sd-dev-006.socialdeal.work/mijn-vouchers/">
        <i class="icon-vouchers">
  </i> Mijn vouchers
    </a>
  </li>
</ul>

我看过CSS类是否有最大字符数，但没有最大值。我也创建了这个fiddle，但它确实有效。

我没有看到什么？任何帮助将不胜感激。