Class SASS伪悬停类不工作（几乎立即消失）

我的目标是创建一个简单的悬停状态，其中导航链接下方显示一条橙色线

使用下面的代码，当我悬停时，我什么也得不到，但当我将光标移离链接时，该行出现一毫秒，然后消失

指南针没有错误，悬停状态瞬间工作，但随后消失！我已经重复了好几次，但都失败了。请专业人士解释一下，请

代码：

---

结束。

而不是

过渡：边框底部

使用

过渡：边框颜色

，然后在

和：胡佛

状态中，您只需要

边框颜色：$seconday color

jsiddle:
除非您有Sass->CSS编译问题，否则只发布已编译的CSS。这不是Sass的问题。
nav {
    @include make-row();
    @include make-sm-column(12);

    .main-nav {
        float: right;
        list-style: none;

        li {
            display: inline-block;
            margin-left: 40px;
            margin-top: 55px;

            a {
                &:link,
                &:visited {
                    padding: 8px 0;
                    color: #fff;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-size: 0.9em;
                    border-bottom: 2px solid transparent;
                    transition: border-bottom 0.8s;
                }
                &:hover,
                &:active {
                    border-bottom: 2px $seconday-color;
                }
            }
        }
    }
}