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



我正在尝试更改Rails应用程序中顶栏的颜色。我修改了foundation_and_overrides.scs,可以成功地更改主顶栏背景。但是按钮和链接仍然是默认的黑色。这是文件的相关部分。

有人能告诉我我缺了什么吗?

// 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\样式表\foundation\components_top-bar.css文件,看看会发生什么。链接的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;

试试这个:

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

我想明白了。问题出现在我的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"并添加了"require 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文件中,我重新导入了:

@导入"基础/组件/按钮";

相关内容

  • 没有找到相关文章

最新更新