访问链接的sass css navbar变量

Question

我正在尝试用一些在GitHub上遇到的sass css变量来设计我的navbar。

$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链接背景变成浅灰色在悬停和深灰色时访问和活动。现在，我的下拉菜单链接将变成深灰色，但我的普通链接不改变颜色时访问。我理解这可能是因为访问不是我上面列出的变量。是否存在$navbar-default-link-visited-bg变量？我在github或其他任何地方都没有看到。

谢谢！

Answer 1

你的问题不进一步澄清就有点难以回答。据我所知，你要么想：

1. 添加样式以区分用户以前单击/查看过的链接和未单击过的链接。
2. 添加样式以区分菜单栏中当前活动的页面链接。

若要设置用户以前看到的链接的样式，请使用:visited链接伪类。您可以将此与Sass变量结合起来，以实现一致的配色方案，其外观可能如下所示：

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

编辑：哎呀，刚刚注意到你原来问题上的twitter-bootstrap标签！在这种情况下（假设您在页面中包含了navbar组件所需的任何/所有Javascript），引导程序应该处理.current类切换，正如我所假设的那样。

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

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

仅仅将变量粘贴到Sass中实际上不会将任何样式应用到标记中。如果您想要进一步自定义CSS，超出您正在使用的默认值，那么您需要实际实现这些变量！

由于没有更多的细节，为了举例起见，我编了上面的类名、变量等。但我想这已经足够让你开始了。