SASS - 覆盖链接颜色的用户代理样式表

Question

这似乎是一个非常愚蠢的问题，但我在 webkit 覆盖我的 SASS 时遇到了麻烦。

在我看来，我有：

<%= link_to 'New Category', new_category_path, :class => 'button button-new' %>

在 application.css.scss 中：

.button{
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;

    a{
        color: #FFF;
        text-decoration: none;
    }
}

.button-new{
    background-color: #428bca;
    padding: 1% 2% 1% 2%;   
}

但是，我浏览器中的链接颜色是默认的蓝色，带有下划线。当我在开发人员工具下检查元素时，没有看到/读取链接的样式。相反，该链接使用来自用户代理样式表的样式。

我知道我一定是在做一些相当简单的错误，但我终生无法发现它！

Answer 1

你应该像这样定义你的 SASS：

.button{
  font-family: "Verdana", sans-serif;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  border-radius: 3px;

  color: #FFF;
  text-decoration: none;
}

因为您的链接有 .button 类。

Answer 2

结构

您的链接将创建一个带有 button 类的 <a href= 元素

这意味着你的样式与你的 HTML 结构不匹配，因为你有 a 嵌套在 button 类中，CSS 基本上会寻找这个：

<div class="button">
   <a href="..."></a>
</div>

--

你希望它的工作方式是这样的：

<a href="..." class="button"></a>

要在 SCSS 中执行此操作，您需要设置 a 标记 in line with your class 的样式，如下所示：

a.button{
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    text_decoration: none;
}