Rails/Zurb Foundation TopBar - 无法更改链接/按钮背景颜色

Question

我正在尝试更改我的 Rails 应用程序顶部栏的颜色。我已经修改了foundation_and_overrides.scss 并且可以成功更改主顶栏背景。但按钮和链接保持默认黑色。这是文件的相关部分。

谁能告诉我我错过了什么？

// My color scheme
$color-1        :  #B2E166;
$color-2        :  #E5F279;
$color-3        :  #99FFFF;

// Background color for the top bar
$topbar-bg-color: $color-3;
$topbar-bg: $topbar-bg-color;

// Height and margin
// $topbar-height: rem-calc(45);
// $topbar-margin-bottom: 0;

// Controlling the styles for the title in the top bar
// $topbar-title-weight: $font-weight-normal;
// $topbar-title-font-size: rem-calc(17);

// Set the link colors and styles for top-level nav
// $topbar-link-color: $white;
// $topbar-link-color-hover: $white;
// $topbar-link-color-active: $white;
// $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
$topbar-link-bg: $topbar-bg;
// $topbar-link-bg-hover: $jet;
// $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: ($topbar-height / 3);
// $topbar-back-link-size: rem-calc(18);
// $topbar-link-dropdown-padding: rem-calc(20);
// $topbar-button-font-size: .75rem;
// $topbar-button-top: 7px;

// Style the top bar dropdown elements
$topbar-dropdown-bg: $topbar-bg;
// $topbar-dropdown-link-color: $white;
// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
$topbar-dropdown-link-bg: $topbar-bg;
// $topbar-dropdown-link-bg-hover: $jet;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: .4;

// $topbar-dropdown-label-color: $monsoon;
$topbar-dropdown-label-color: $topbar-bg;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
// $topbar-dropdown-label-bg: $oil;

更新 我编辑了 Ruby21\lib\ruby\gems\2.1.0\gems\foundation-rails-5.5.2.1\vendor\assets\stylesheets\foundation\components_top-bar.scss 文件看看会发生什么。链接的背景颜色更改为白色 (#FFFFFF)。为什么lib文件有效而本地文件无效？

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import 'global';
@import 'grid';
@import 'buttons';
@import 'forms';

//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes !default;

// Background color for the top bar
$topbar-bg-color: $oil !default;
$topbar-bg: $topbar-bg-color !default;

// Height and margin
$topbar-height: rem-calc(45) !default;
$topbar-margin-bottom: 0 !default;

// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal !default;
$topbar-title-font-size: rem-calc(17) !default;

// Set the link colors and styles for top-level nav
$topbar-link-color: $white !default;
$topbar-link-color-hover: $white !default;
$topbar-link-color-active: $white !default;
$topbar-link-color-active-hover: $white !default;
$topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: #FFFFFF !default;

Answer 1

我想通了。问题出在我的 application.sccs 文件中。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */
 @import "foundation_and_overrides";

我删除了“require_tree”。并添加了“需要foundation_and_overrides”

这是有效的文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require foundation_and_overrides
 *= require_self
 */

在我重新导入的树中的一个 SCSS 文件中：

@import "基础/组件/按钮";

Answer 2

试试这个：

$topbar-link-bg: $topbar-bg-color;