不能用@extend .btn覆盖Twitter Bootstrap按钮;？

Question

我的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和类，即使我使用Google Chrome的Inspect Element时它仍然可识别.navbar .nav＆gt; li> a.btn.btn-success {      @extend .btn;      @extend .btn-success; 第一次，它看起来很丑/不像原始按钮。

我在这里缺少什么？

  <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>

由于

Answer 1

使用extends时，相应的CSS声明将显示在生成的CSS文件的顶部。

这就是在SASS中扩展工作的方式，你可以做的并不多，但这里有几个解决方法供你考虑：

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

UPD 1

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

请查看已编译的CSS文件并找到该规则。它是空的还是空的？编译SASS时，是否收到任何警告？

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

UPD 2

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

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

和/或Bootstrap可能存在问题。原始Bootstrap不是由SASS提供电源。它是用LESS编写的，应该通过导入膨胀的静态CSS文件（超过100KB，yikes！）来使用。 SASS允许您导入静态CSS文件，但它无法扩展在那里声明的类。

Bootstrap有几个SASS端口（谷歌bootstrap sass）。它们可能允许您在语义上应用样式，从而产生更小的CSS。他们也应该允许扩展他们的任何课程。