时间戳

首页 > 解决方案 > 使用 SASS 自定义按钮颜色

sass - 使用 SASS 自定义按钮颜色

问题描述

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

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

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

目前我使用这个https://www.codeply.com/go/76H7JWg7Zl但当然边框/鼠标悬停/等使用 btn-primary 类的原色......

标签： sassbootstrap-4

解决方案

在研究了 bootstrap 的 scss 源文件以及一些在线资源之后，我最终发现定义以下 SASS mixins 可以解决我的问题：

@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%));
}

我什至通过重写我以前的小提琴来确认它正在工作，实际上结果完全按照我的意愿结束（https://www.codeply.com/go/uYPxiuNkbu）。

Codeply 也“足够好”，可以在适当的选项卡中提供小提琴中使用的 sass 代码的编译 css ......

但这是预处理 sass 代码的间接方式......正确的方式是什么？没有某种在线 CSS 预处理器吗？即，我读到（https://themestr.app/customize）可用于自定义引导代码，然后所有自定义最终都在编译的 custom.css 文件中......这是如何工作的？到目前为止，我还没有成功实现这一目标。请对此有所帮助？

推荐阅读