无法使用 @extend .btn; 覆盖 Twitter Bootstrap 按钮？

Posted 2023-04-13

【中文标题】无法使用 @extend .btn; 覆盖 Twitter Bootstrap 按钮？

【英文标题】：Can't override Twitter Bootstrap Button with @extend .btn;?

【发布时间】：2013-05-01 01:19:17

【问题描述】：

我的 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 @扩展 .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>

谢谢

【问题讨论】：

尝试导入响应式引导程序

【参考方案1】：

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

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

使用extend 生成更长的选择器序列。

如果您的扩展选择器序列将更多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，哎呀！）来使用。 SASS 确实允许您导入静态 CSS 文件，但它无法扩展那里声明的类。

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

【讨论】：

我不确定我是否不理解您的回答，或者我们是否相互误解。我希望它使用@extend，这样按钮看起来应该像原来的那样。我在顶部添加了更多代码和图像。

更新了我的回答，要求您提供更多信息。 :)

添加了另一个屏幕截图。没有警告。如您所见， style.scss 已填充。仍然缺少一些东西。感谢您的积极回应。

我一直在做一些研究：样式文件必须是 css.scss 还是 scss.css 还是什么？似乎所有教程都说 .css.scss，但是当我这样做时，它不会将代码拉入识别它。

再一次，您必须编译 SCSS 代码以生成 CSS。这是一篇不错的文章开头：thesassway.com/beginner/getting-started-with-sass-and-compass 别忘了接受我的回答。 ^_^