Rails/Zurb基金會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; 

UPDATE 我編輯的 Ruby21 \ LIB \紅寶石\寶石\ 2.1.0 \寶石\基礎護欄-5.5.2.1 \供應商\資產\樣式表\基礎\ components_top，bar.scss 文件，看看會發生什麼。鏈接的bg顏色變爲白色（#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;