1

我的 stylsheet.scss 中有以下内容：

   @import "bootstrap";

    .navbar .nav > li > a.btn.btn-success {
     @extend .btn;
     @extend .btn-success;

在 Rails 中，我的标题中有以下行

    <li><%= link_to 'Post A Ride', home_path, :class => "btn btn-success" %></li>

问题是按钮仍然从 li 和 a 类继承，即使当我使用 Google Chrome 的 Inspect Element 时它识别 .navbar .nav > li > a.btn.btn-success { @extend .btn; @extend .btn-成功； 首先，它看起来很丑/不像原来的按钮。

我在这里想念什么？

  <header class="navbar">
  <div class="navbar-inner">
   <div class="container"> 

   <%= link_to "ALift", '#', id: "logo" %>
   <nav>
   <ul class="nav pull-right">
    <li><%= link_to 'Post A Ride', home_path, :class => "btn btn-success" %></li>
    <li><%= link_to "Search",  '#' %></li>
    <li><%= link_to "Help",    '#' %></li>
    <li><%= link_to "Sign in", '#' %></li>
   </ul>
  </nav>
   </div>
  </div>
 </header>

在此处输入图像描述 在此处输入图像描述

谢谢

在此处输入图像描述

4

1 回答 1

3

当您使用扩展时，相应的 CSS 声明会出现在生成的 CSS 文件的顶部。

这就是扩展在 SASS 中的工作方式，您无能为力，但这里有几个解决方法供您考虑：

  • 使用 extend 产生更长的选择器序列。如果您的扩展选择器序列更具体，它将优先于默认样式，即使默认样式稍后出现在代码中。
  • 在不使用扩展的情况下手动重新创建样式。如果您避免扩展，您的样式将按正常顺序显示。如果它们出现在默认样式下方，即使它们具有相同的特异性，它们也会有效。

更新 1

好的，现在当您提供更多信息时，我可以在您的 Chrome 屏幕截图中看到您已经获得了.navbar .nav > li > a.btn.btn-success没有任何声明的规则。

请查看编译后的 CSS 文件并找到该规则。是空的还是不空的？当你编译你的 SASS 时，你会收到任何警告吗？

请再次更新您的问题，并对我的回答发表后续评论。

更新 2

好的，现在很明显你的 SCSS 没有被编译。您是否直接从 HTML 链接您的 SCSS 文件？

没有浏览器能够呈现 SCSS/SASS。为了让它工作，你必须将 SASS 编译成常规的 CSS 并提供 CSS。

和/或 Bootstrap 可能存在问题。原始的 Bootstrap 不是由 SASS 驱动的。它是用 LESS 编写的，应该通过导入一个臃肿的静态 CSS 文件（超过 100KB，哎呀！）来使用。SASS 确实允许您导入静态 CSS 文件，但它无法扩展那里声明的类。

bootstrap sassBootstrap (google )有几个 SASS 端口。它们可能允许您在语义上应用样式，从而产生更小的 CSS。他们也应该允许扩展他们的任何类。

于 2013-05-07T07:11:14.913 回答