如何对待！在实现自定义引导主题时很重要？
我的场景
我最近在Bootstrap 4.1中写了一个简单的网站，它应该使用一种特定的紫色来满足所有的着色需求。
我的想法是创建一个CSS类.btn-purple，它覆盖所有必要的颜色相关属性，如color、background-color、border-color等。
这对于基本的配色方案很有效，但是一旦涉及到不同的按钮状态，比如:hover，:focus和:active，我就发现Bootstraps内置的选择器被认为是"more specific"而不是我简单的类选择器，因此否决了它们。
我的“修复”
我暂时修复了这个问题，将!important应用于我所有的自定义选择器。然而，这似乎被认为是糟糕的设计，我不确定如何解决这个问题。我链接到的页面特别说明了以下内容：
- Always在考虑
!important. - Only之前先寻找一种方法来使用特异性在特定于页面的CSS上使用覆盖外部CSS (来自外部库，如Bootstrap或normalize.css).
)的!important
这对我来说似乎有点矛盾。我不确定在我的用例中，!important的使用是否合理，或者它是否仍然被认为是黑客行为。
此外，我想补充说，我使用的是由他们的CDN提供的Bootstrap。因此，编译我自己的风格是我想要避免的事情。
我的问题
在这种情况下，处理!important的首选方法是什么？
回答 2
Stack Overflow用户
发布于 2018-06-20 22:13:27
下面的例子是我如何创建按钮的：
<a class="btn btn-outline-primary btn-purple" href="#">因为我总是将“主”样式应用于按钮，所以我的自定义类很难覆盖该样式。解决方案很简单，就是删除btn-outline-primary并自己实现btn-outline-purple，如下所示：
.btn-outline-purple {
color: #490088;
background-color: transparent;
background-image: none;
border-color: #490088;
}
.btn-outline-purple:not(:disabled):not(.disabled):active,
.btn-outline-purple:hover {
color: #ffffff;
background-color: #490088;
border-color: #490088;
}
.btn-outline-purple:focus {
box-shadow: 0 0 0 0.2rem rgba(73, 0, 136, 0.5);
}这样，就可以在没有任何!important样式的情况下模拟.btn-outline-*的行为。然后将创建一个新按钮，如下所示：
<a class="btn btn-outline-purple" href="#">Stack Overflow用户
发布于 2018-06-20 22:08:15
您可以尝试覆盖变量defaults：
Bootstrap 4中的每个Sass变量都包含!default标志，允许您在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改它们的值，并删除!default标志。
同一Sass文件中的变量替代可以在默认变量之前或之后。但是，当覆盖整个Sass文件时，必须在导入Bootstrap的Sass文件之前进行覆盖。
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";根据需要对Bootstrap中的任何变量重复
，包括以下全局选项。
https://stackoverflow.com/questions/50949891
复制相似问题