Question

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

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

Answer 1

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

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变量，应在导入引导后定义。

Answer 2

根据最新的bootstrap文档，可以覆盖的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

的更多信息，请参阅此处

Answer 3

这里要点是你必须在正确的位置中指定正确的变量名称。

正确的变量名称：bootstrap less variable names。您需要将@字符更改为$以获取 sass语法。
正确位置：在调用@import "bootstrap";之前定义自定义变量。如果已加载bootstrap，则永远不会使用您的自定义变量，这就是您的代码无效的原因。

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

<强> bootstrap_and_overrides.css.scss

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

@import "bootstrap";

Answer 4

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

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

Answer 5

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

font-family-base和font-size-base

另外，来自SASS documentation：

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

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

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

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

如何设置baseFontFamily for bootstrap？

5 个答案: