如何使用 SASS 更改成功按钮的颜色？

Posted 2023-03-06

【中文标题】如何使用 SASS 更改成功按钮的颜色？

【英文标题】：How to change the color of the success button with SASS?

【发布时间】：2020-07-29 17:52:15

【问题描述】：

目前我的主题的成功按钮是绿色的。我想把它涂成黄色。我该怎么做？

在_variables.scss 文件中有这些行：

$btn-success-color:              $btn-default-color !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

我在我的自定义文件style.scss 中添加了以下几行：

$btn-success-color:              #000 !default;
$btn-success-bg:                 #FFD700 !default;
$btn-success-border:             #FFD700 !default;

我不知道这是否是正确的方法，但它不起作用。

我已经用更改编译了我的主题，但成功按钮始终是绿色的。

【问题讨论】：

欢迎来到 SO，它应该可以按照您上面的代码正常工作。但文件排序（导入 sass 文件的顺序）也很重要。因此，如果您在任何其他部分（其他 sass 文件）使用更新的变量后声明它，那么它将无法按预期工作。

@divy3993 这是我的文件，对我来说似乎是正确的，你怎么看？ pastebin.com/iPeguVcJ该样式在我网站的代码中显示良好，但不会替换默认样式ibb.co/jkY0bg0

这里我注意到您已将变量命名为 $btn-success-color:，其中 bootstrap 将其命名为 $brand-success:。

所以基本上如果你试图覆盖 Bootstrap 变量$brand-success，那么你必须具有相同的变量名称和更新的值才能覆盖它。如果这不是你想要的，我仍然不清楚你在尝试什么。

@divy3993 好的，谢谢，我刚刚看到我的错误，我的 style.css 文件中有一个自定义样式，因为它是一个我正在尝试转换为 scss 的新主题

【参考方案1】：

如果您真的想覆盖style.scss 中的变量，则必须在在导入_variables.sccs

之前定位它们

根据引导：

同一个 Sass 文件中的变量覆盖可以在之前或之后 默认变量。但是，当覆盖 Sass 文件时， 必须在导入 Bootstrap 的 Sass 文件之前进行覆盖。

如果您想以干净的方式执行此操作，我建议您先加载默认引导变量，然后从另一个文件加载您的自定义 var，例如 _variables-custom.scss 。

在_variables-custom.scss 中，复制/粘贴_variables.scss 中的值以覆盖它们。你必须记住几件事：

_variables-custom.scss 必须在默认 _variables.scss 之后导入 必须在您的_variables-custom.scss 中删除所有!default，以便它们正确覆盖_variables.scss 值。 如果可能，我建议不要在_variables-custom.scss 之外存储任何变量，这样当您搜索一个变量时，您就知道它在哪里。

所以你应该有 style.scss ：

@import 'variables.scss'
@import 'variables-custom.scss'

_variables.scss：

$btn-success-color:              $btn-default-color !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

_variables-custom.scss：

$btn-success-color:              #000 ;
$btn-success-bg:                 #FFD700;
$btn-success-border:             $btn-success-bg;