如何为基础按钮设置自定义字体
How to set custom font for foundation button
我正在尝试为 foundation 6 中的按钮设置自定义字体系列，但不幸的是我是 运行 foundation 6 with sass，我相信他们已经删除了 $button-font-family以前版本中的变量。在没有变量的情况下实现此目标的最佳解决方案是什么？
理想情况下，我也想对按钮文本应用文本转换，这也不是 _setting.sass 基础文件中的按钮变量。正如您可能已经收集到的那样，我对基础和 sass 非常陌生，因此非常感谢任何帮助。
它看起来不像是在 scss/components/_button.scss 中指定的字体系列，而那是定义按钮样式的地方。 $body-font-family 在 scss/settings/_settings.scss 和 scss/_global.scss 中设置（如果尚未在 _settings.scss 中定义）。因此，请确认您已在此处更新 $body-font-family 的值。
除此之外，如果您在语义上使用 sass 基础（即混入），您应该能够像这样使用 button 混入：
@include button( false, #ebebeb, #a5a5a5, black, solid );
..然后像往常一样在 之后设置字体系列 属性 mixin。
----更新：基于跟进question/comment----
这是我正在处理的其中一个基础站点的主要 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。这允许我们在代码中语义地使用 mixins。
// Include Foundation classes/styles that we want to use
这将输出我们要从基础使用的预定义 classes/styles。通常，您至少希望包括全局样式和排版样式。
// Author Variables
这是我放置自定义变量的地方（与 Foundation 无关）。如果你愿意，你可以把它放在另一个部分 - 只是一个偏好。
// Author components
这些是项目的自定义组件，可能使用也可能不使用 Foundation 的 mixins。关键是，既然我们已经包含了我们想要使用的 components/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; }
}
我正在尝试为 foundation 6 中的按钮设置自定义字体系列，但不幸的是我是 运行 foundation 6 with sass，我相信他们已经删除了 $button-font-family以前版本中的变量。在没有变量的情况下实现此目标的最佳解决方案是什么？
理想情况下，我也想对按钮文本应用文本转换，这也不是 _setting.sass 基础文件中的按钮变量。正如您可能已经收集到的那样，我对基础和 sass 非常陌生，因此非常感谢任何帮助。
它看起来不像是在 scss/components/_button.scss 中指定的字体系列，而那是定义按钮样式的地方。 $body-font-family 在 scss/settings/_settings.scss 和 scss/_global.scss 中设置（如果尚未在 _settings.scss 中定义）。因此，请确认您已在此处更新 $body-font-family 的值。
除此之外，如果您在语义上使用 sass 基础（即混入），您应该能够像这样使用 button 混入：
@include button( false, #ebebeb, #a5a5a5, black, solid );
..然后像往常一样在 之后设置字体系列 属性 mixin。
----更新：基于跟进question/comment----
这是我正在处理的其中一个基础站点的主要 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。这允许我们在代码中语义地使用 mixins。
// Include Foundation classes/styles that we want to use
这将输出我们要从基础使用的预定义 classes/styles。通常，您至少希望包括全局样式和排版样式。
// Author Variables
这是我放置自定义变量的地方（与 Foundation 无关）。如果你愿意，你可以把它放在另一个部分 - 只是一个偏好。
// Author components
这些是项目的自定义组件，可能使用也可能不使用 Foundation 的 mixins。关键是，既然我们已经包含了我们想要使用的 components/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; }
}