使用SASS自定义按钮颜色

我之所以开始这个话题，是因为我没有必要的50点声望来直接向我感兴趣的话题提问

所以，我的问题是，我需要25个特定颜色的引导按钮（用户将使用这些按钮在一些Pantone变体中进行选择）。我发现了一个很棒的主题，Zim提出了一个SASS解决方案，它显然为各种按钮状态/边框等节省了大量CSS编写

然而，由于我是SASS新手，我不明白它应该如何在我的网页中实现。更具体地说，我不知道把提到的颜色变量和新的按钮类放在哪里

---

目前我使用这个，但是当然边框/鼠标盖/etc使用btn主类的原色…

如果你想学习SASS，你可以访问他们的官方网站。如果你知道css sass并不难学

对于安装gulp，您可以找到很多教程！ 这是你可以通过的

对于使用引导4主题，如果您希望只学习sass基础知识，那么就不需要太多。你可以用它来代替狼吞虎咽

您只需按照以下步骤操作即可

• 要在任何本地项目上安装引导程序，请执行以下操作：
• npm init-y
• npm安装
• npm安装引导程序--保存
• 手动运行（无吞咽）：
• sass路径/filename.sass/filename.scss filename.css

创建新主题后，可以使用与使用引导主题相同的方法来使用它。例如：

希望能有帮助

/*更改主题颜色*/
$theme颜色：(
“信息”：，
“危险”：#ff50f0，
“主要”：#0095ff，
“中学”：#28a745
);
/*创建自己的主题*/
$主题颜色：(
“定制颜色”：#900
);在研究了引导的scss源文件和一些在线资源后，我最终认为定义以下SASS mixin可以解决我的问题：

@import "bootstrap";

.btn-ffa300 {
    @include button-variant(#ffa300, darken(#ffa300, 5%));
}
.btn-ffd700 {
    @include button-variant(#ffd700, darken(#ffd700, 5%));
}
.btn-97d700 {
    @include button-variant(#97d700, darken(#97d700, 5%));
}
.btn-012169 {
    @include button-variant(#012169, darken(#012169, 5%));
}
.btn-001489 {
    @include button-variant(#001489, darken(#001489, 5%));
}
.btn-ff8200 {
    @include button-variant(#ff8200, darken(#ff8200, 5%));
}
.btn-c4d600 {
    @include button-variant(#c4d600, darken(#c4d600, 5%));
}
.btn-84bd00 {
    @include button-variant(#84bd00, darken(#84bd00, 5%));
}
.btn-0033a0 {
    @include button-variant(#0033a0, darken(#0033a0, 5%));
}
.btn-c8c9c7 {
    @include button-variant(#c8c9c7, darken(#c8c9c7, 5%));
}
.btn-ff6900 {
    @include button-variant(#ff6900, darken(#ff6900, 5%));
}
.btn-78d64b {
    @include button-variant(#78d64b, darken(#78d64b, 5%));
}
.btn-009ca6 {
    @include button-variant(#009ca6, darken(#009ca6, 5%));
}
.btn-002d72 {
    @include button-variant(#002d72, darken(#002d72, 5%));
}
.btn-7c878e {
    @include button-variant(#7c878e, darken(#7c878e, 5%));
}
.btn-ff6a13 {
    @include button-variant(#ff6a13, darken(#ff6a13, 5%));
}
.btn-ef3340 {
    @include button-variant(#ef3340, darken(#ef3340, 5%));
}
.btn-69b3e7 {
    @include button-variant(#69b3e7, darken(#69b3e7, 5%));
}
.btn-002f6c {
    @include button-variant(#002f6c, darken(#002f6c, 5%));
}
.btn-63666a {
    @include button-variant(#63666a, darken(#63666a, 5%));
}
.btn-fe5000 {
    @include button-variant(#fe5000, darken(#fe5000, 5%));
}
.btn-c8102e {
    @include button-variant(#c8102e, darken(#c8102e, 5%));
}
.btn-003da5 {
    @include button-variant(#003da5, darken(#003da5, 5%));
}
.btn-002855 {
    @include button-variant(#002855, darken(#002855, 5%));
}
.btn-4f2c1d {
    @include button-variant(#4f2c1d, darken(#4f2c1d, 5%));
}

我甚至通过重写我以前的小提琴来确认它是有效的，事实上，结果完全符合我的期望（）

Codeply还“足够友好”，可以在适当的选项卡中提供fiddle中使用的sass代码的编译css

但这是一种间接的预处理sass代码的方法。。。正确的方法是什么？难道没有某种在线CSS预处理器吗？也就是说，我读到（）可以用来自定义引导代码，然后所有的自定义都会在compiles custom.css文件中结束。。。这是怎么回事？到目前为止，我还没有成功地做到这一点。请提供一些帮助？
SASS在服务器端编译成CSS。浏览器不理解SASS。您首先需要一个SASS编译器，比如节点SASS设置。我使用的服务器是共享主机，我怀疑我是否能够安装它。我也没有听说过它，但是我会研究它。然后你可能想考虑一个定制的Bootstrap构建：使用你想要的颜色。SASS也可以很容易地被编译成CSS并在服务器上使用。你能给我一个例子，说明我如何使用MeTestCo定制器添加25个按钮类吗？如果我理解正确，我可以用它来定义一些额外的类？或者你可以用它来编译整个引导版本？如果是第二个，我很满意他们CDN使用的标准引导。我只想编译那25个按钮类。我有点糊涂了！：(