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

<强>结构

您的链接将使用课程<a href=

创建button元素

这意味着您的样式将与您的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;
}

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

2 个答案: