css - 如何为基础按钮设置自定义字体

Question

我正在尝试为基础 6 中的按钮设置自定义字体系列，但没有成功 我正在使用 sass 运行基础 6，并且相信他们已经删除了 $button-font-family 变量在以前的版本中。在没有变量的情况下实现此目标的最佳解决方案是什么？

理想情况下，我也想在按钮文本上应用文本转换，这也不是 _setting.sass 基础文件中的按钮变量。正如你可能已经收集到的那样，我对基础和 sass 非常陌生，所以任何帮助将不胜感激。

Answer 1

它看起来不像是在 scss/components/_button.scss 中指定的字体系列，而那是定义按钮样式的地方。 $body-font-family 在 scss/settings/_settings.scss 和 scss/_global.scss 中设置(如果没有已在 _settings.scss 中定义)。因此，验证您是否已在此处更新了 $body-font-family 的值。

除此之外，如果您在语义上使用 foundation sass(即 mixins)，您应该能够像这样使用 button mixin:

@include button( false, #ebebeb, #a5a5a5, black, solid );

..然后像往常一样在 mixin 之后设置 font-family 属性。

----更新:基于后续问题/评论----

这是我正在处理的一个基础站点的示例主 sass 文件。

// Author copy of Foundation settings/_settings.scss
@import "settings";

// Author copy of Foundation _globals.scss
@import "global";

// Import from Foundation
@import "path/to/foundation-sites/scss/grid/grid";
@import "path/to/foundation-sites/scss/typography/typography";
@import "path/to/foundation-sites/scss/components/button";

// Include Foundation classes/styles that we want to use
@include foundation-global-styles();
@include foundation-typography();

//
// Author Variables
//
$color-map : ( 'blue': #40578a, 'blue-tint': #7e8ba8, 'blue-shade': #364a75, 'dark': #3d3e41, 'silver': #bdc0c6, 'gold': #ab883c );
$blue      : map-get($color-map, 'blue');
$blue-tint : map-get($color-map, 'blue-tint');
$blue-shade: map-get($color-map, 'blue-shade');
$dark      : map-get($color-map, 'dark');
$silver    : map-get($color-map, 'silver');
$gold      : map-get($color-map, 'gold');
//
// Author Components
//
@import "common";
@import "btn";
@import "view";
@import "cover";
@import "header";
@import "hero";
@import "navbar";
@import "main";
@import "page";
@import "intro";
@import "services";

我将逐节介绍这一节。它非常简单，一旦您以这种方式设置了一个元素，您就会爱上它。

// Author copy of Foundation settings/_settings.scss

在这里，我们正在导入 Foundation _settings.scss 文件的副本并根据我们的需要对其进行修改。不要弄乱 Foundation 附带的原始 _settings 文件。这样做会使以后更新库变得更加困难。

// Author copy of Foundation _globals.scss

与 _settings 文件的概念相同。

// Import from Foundation

这些导入是我想在这种情况下使用的 Foundation 框架的唯一部分。这些组件文件包括用于生成这些组件的 mixin。这允许我们在代码中语义地使用混合。

// Include Foundation classes/styles that we want to use

这将输出我们想要从基础使用的预定义类/样式。通常，您至少希望包括全局样式和排版样式。

// Author Variables

这是我放置自定义变量(与 Foundation 无关)的地方。如果你愿意，你可以把它放在另一个部分 - 只是一个偏好。

// Author components

这些是元素的自定义组件，可能使用也可能不使用 Foundation 的 mixins。关键是，既然我们已经包含了我们想要使用的组件/mixins，那么我们就可以了。

所以，在你的情况下，你可以简单地这样做:

// Foundation settings
@import "settings";

// Foundation globals
@import "global";

// Import from Foundation
@import "../path/to/foundation-sites/scss/components/button";

//
// Author Variables
//
$special-button-font: Georgia, serif;

.special-button {
    @include button(false, #ebebeb, #a5a5a5, black, solid);
    font-family: $special-button-font;
    &.tiny     { font-size: map-get($button-sizes, tiny); }
    &.small    { font-size: map-get($button-sizes, small); }
    &.large    { font-size: map-get($button-sizes, large); }
    &.expanded { @include button-expand; }
}