我正在尝试更改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文件中,我重新导入了:
@导入"基础/组件/按钮";