如何使用variable.scss更改引导程序中主按钮的颜色? [英] How to change color of primary button in bootstrap using variable.scss?

问题描述

我使用 variable.scss 文件来自定义我的按钮.我的问题是不使用 CSS，而只使用 SCSS.

I use a variable.scss file to custom my button. My question is NOT USE CSS but SCSS ONLY.

我从更改原色 (#66cccc) 和字体 (RobotoSlab) 开始:

I start with change primary color (#66cccc) and font (RobotoSlab):

$primary: #66cccc;
$font-family-base: RobotoSlab;

但我想要白色的文字(见屏幕截图)但我的字体是黑色的

but i want white color of text (see screensot) but my font is black

bootstrap 根据原色计算黑/白颜色(如果它很暗或很亮)

bootstrap calculates black/white color according to the primary color (if it is rather dark or light)

推荐答案

你是对的，bootstrap 根据背景颜色定义文本颜色并使文本变亮或变暗.但是可以配置.

You are right that bootstrap defines text color based on the background color and makes text either light or dark. But it can be configured.

如果深入挖掘，您会看到 Bootstrap 使用函数 color-yiq (source) 来确定文本应该是深色还是浅色.所以基本上你需要两件事来获得按钮的白色文本:

If to dig deeper, you'll see that Bootstrap uses function color-yiq (source) to determine whether text should be dark or light. So basically you need two things to get white text for buttons:

• 调整$yiq-contrasted-threshold的值
• 确保 $yiq-text-light 等于白色(默认情况下它是真的，所以你可能不需要担心)

• adjust value of $yiq-contrasted-threshold
• make sure $yiq-text-light equals to white color (by default it's true, so probably you don't need to worry about it)

这篇关于如何使用variable.scss更改引导程序中主按钮的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！