访问链接的sass css navbar变量

Question

我试图用我在github上遇到的一些sass css变量来设置导航栏的样式。

$navbar-default-link-color:                $dlu-blue !default;
$navbar-default-link-hover-color:          $dlu-dark-gray !default;
$navbar-default-link-hover-bg:             $dlu-light-gray !default;
$navbar-default-link-active-color:         $white !default;
$navbar-default-link-active-bg:            $dlu-dark-gray !default;

我希望我的导航栏链接背景在悬停时变为浅灰色，在访问和活动时变为深灰色。现在，我的下拉菜单链接将变为深灰色，但我的常规链接在访问时不会改变颜色。我理解这可能是因为访问不是我上面列出的变量。那里有$ navbar-default-link-visited-bg变量吗？我没有在github或其他任何地方看到过。

单击下拉列表时，背景颜色会正确更改：

当我点击主页链接时，背景颜色保持不变：

谢谢！

Answer 1

如果不进一步澄清，您的问题有点难以回答。根据我的收集，您要么：

1. 添加样式以区分用户之前点击/查看过的链接，而不是之前没有的链接。
2. 添加样式以区分菜单栏中当前活动的页面链接。

1。样式化以前访问过的链接

要设置用户之前看过的链接的样式，请使用the :visited link pseudo-class。您可以将此与您已有的Sass变量结合使用，以实现一致的颜色方案，可能类似于：

a:visited {
  /*=targets ALL previously visited links */
  background: $dlu-light-gray;
  }

2。设置活动菜单栏项目

  

编辑：哎呀，刚刚注意到原始问题上的 twitter-bootstrap 标记！在这种情况下（假设您已在页面中包含any/all necessary Javascript for the navbar component）Bootstrap应该处理.current类切换，正如我所假设的那样。

要设置菜单栏中当前活动页面链接的样式，您需要通过Javascript向项目添加类。从你的下拉列表的描述，听起来你正在使用一个框架，以某种方式处理内部切换类。因此，我们假设.current类应用于活动的菜单栏项，您的Sass可能如下所示：

.menubarItem.current {
  background: $dlu-light-gray;
  }

外卖

粘贴variables in to your Sass实际上不会将任何样式应用于您的标记。如果你想进一步定制你的CSS超出你正在使用的默认值，你需要实际实现这些变量！

缺乏进一步的细节，为了举例，我已经编写了上面的类名，变量等。但我想这足以让你开始。

Answer 2

这是你的另一种技术 Dave ，可能看起来有点乏味，但我喜欢它......

• 例如，在您的主页上;添加一个类来表示该页面是主页，它是 包装类。 ie ，适用于家庭：<div class="page-wrapper home"></div>
• 对所有页面执行此操作。
• 现在，在您的SASS中，您可以轻松组织和定义活动状态 通过嵌套链接每个链接的样式。

ie。

.home { 
    .home-button { 
         background: $active; // so basically if homepage, home link active
     }
}