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

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的值。

除此之外，如果你在语义上使用基础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";

我将逐节介绍这一部分。它非常简单，一旦你以这种方式设置项目，你就会喜欢它。

  

//基础设置的作者副本/ _settings.scss

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

  

// Foundation _globals.scss的作者副本

与_settings文件相同的概念。

  

//从基金会导入

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

  

//包括我们想要使用的基础类/样式

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

  

//作者变量

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

  

//作者组件

这些是项目的自定义组件，可能会也可能不会使用Foundation的mixins。关键是，如果我们现在想要包含我们想要使用的组件/ mixin，我们可以。

因此，在您的情况下，您可以这样做：

// 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; }
}