0

我试图在我的 bootstrap_and_overrides.css.scss 文件中设置基本字体系列，但由于某种原因，呈现的 HTML 仍然采用默认字体类型而不是覆盖它。有没有办法改变引导变量的默认值？

bootstrap_and_overrides.css.scss

@import "bootstrap";

$baseFontFamily: Arial,Helvetica,sans-serif  !default;
$baseFontSize: 11px !default;

渲染的CSS：

body {
    color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
}
4

5 回答 5

3

以下是有关是否要更改源的两个链接：

http://www.codeproject.com/Articles/594098/How-to-customize-Twitter-Bootstrap-to-fit-your-web

或通过您的自定义 css.scss 文件更改源：

http://www.sitepoint.com/how-to-customize-twitter-bootstraps-design-in-a-rails-app/

基本上你想把你的覆盖放在导入引导程序之前。

$baseFontFamily: Arial,Helvetica,sans-serif  !default;
$baseFontSize: 11px !default;

@import "bootstrap";

字体系列定义为

@import "bootstrap";

@sansFontFamily: Arial,Helvetica,sans-serif
@serifFontFamily: Font you want

这些是 LESS 变量，应该在导入 bootstrap 之后定义。

于 2013-11-05T16:26:52.540 回答
3

根据最新的引导程序文档，此处描述了可以覆盖的 LESS 变量http://getbootstrap.com/customize/#less-variables

这里有一些例子：

@body-bg
@text-color
@font-family-sans-serif

由于您使用的是 SASS，只需将 @ 前缀替换为 $ 前缀即可。如下所示。

$body-bg
$text-color
$font-family-sans-serif

并在导入引导文件之前覆盖它们。

所以要覆盖基本字体系列，

// note: per the bootstrap docs above, $font-family-base inherits 
// from $font-family-sans-serif
$font-family-sans-serif: NewFont !default;

@import "bootstrap";

在此处查看有关 bootstrap-sass 的更多信息https://github.com/twbs/bootstrap-sass

于 2014-04-10T07:53:43.857 回答
2

这里的重点是您必须在正确的位置指定正确的变量名称。

  • 正确的变量名：引导较少的变量名。您需要将@字符更改为$for sass 语法。
  • 正确的位置：在 call 之前定义您的自定义变量@import "bootstrap";。如果已加载引导程序，您的自定义变量将永远不会被使用，这就是您的代码不起作用的原因。

在这种情况下，您的代码应该是：

bootstrap_and_overrides.css.scss

$font-family-base: Arial, "Helvetica", sans-serif;
$font-size-base: 11px;

@import "bootstrap";
于 2014-10-27T06:59:51.400 回答
0

您的变量名称不正确。它应该是

$base-font-family:Arial, "Helvetica", sans-serif;

于 2014-10-28T12:56:05.347 回答
0

如果您使用的是 bootstrap-sass gem，则此变量的正确名称是

font-family-base和font-size-base

此外，来自SASS 文档：

如果尚未分配变量，则可以通过将 !default 标志添加到值的末尾来分配变量。这意味着如果变量已经被赋值，它不会被重新赋值，但如果它还没有值，它将被赋予一个值。

!default||=它是Ruby 中运算符的 SASS 等价物。

因此，在您的情况下，以下将起作用：

$font-family-base: Arial,Helvetica,sans-serif
$font-size-base: 11px
于 2015-05-20T08:08:08.110 回答