更改按钮填充覆盖 sass 变量答案

【问题标题】：Change button padding overwriting sass variables更改按钮填充覆盖 sass 变量
【发布时间】：2020-06-26 08:59:07
【问题描述】：

我正在尝试通过使用 sass 预定义变量覆盖左侧和右侧的 btn-lg 填充，但无法找到该变量。我只能找到

.btn-lg {
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

如何通过覆盖自定义 SCSS 文件中的 sass 变量来更改引导程序 4 中 btn-lg 的左/右填充？

【问题讨论】：

标签： sass bootstrap-4

【解决方案1】：

您可以在 _variables.scss 文件中找到 Bootstrap 的变量默认值。 .btn-lg 使用的默认变量是：

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;
$btn-line-height-lg:          $input-btn-line-height-lg !default;

$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;

要更改.btn-lg 的填充，您需要覆盖custom.scss 文件中$input-btn-padding-y-lg 和$input-btn-padding-x-lg 的默认值。请记住，您的覆盖必须在您导入 Bootstrap 的 Sass 文件之前进行。

例如，为了减少 .btn-lg 的填充，我会将其放入我的 custom.scss 文件中：

// Variable overrides
$input-btn-padding-y-lg:      0.2rem;
$input-btn-padding-x-lg:      0.5rem;

// Import Bootstrap and its defaults
@import "../bootstrap/scss/bootstrap"

【讨论】：

非常感谢。这真的很有帮助
不客气@zinnira。如果它解决了您的问题，您可以接受答案吗？谢谢。