主题化Bootsrap 4-Color-yiq作为变量替代

Question

我想覆盖自举变量，但使用color-yiq函数，例如：

$body-bg:     $black;
$body-color:  color-yiq($body-bg);

这是SCSS结构

 // Overrides variables from all sources
@import "variables";

// Bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap";

// Fonts
@import "../../node_modules/font-awesome/scss/font-awesome";
@import "../../node_modules/material-design-icons-iconfont/src/material-design-icons";

// Plugins
@import "../../node_modules/datatables.net-bs4/css/dataTables.bootstrap4";

// André's Core - Bootstrap improvments
@import "core";

CSS输出是这样的：

body {
   color: color-yiq(#000);
   text-align: left;
   background-color: #000;
}

除了使用color-yiq以外，还可以使用其他功能使颜色变深或变亮吗？

谢谢！

Answer 1

您需要这样导入_functions：

@import "node_modules/bootstrap/scss/_functions.scss";

也不要忘记在所需变量之前声明。例如：

$yiq-text-dark: black !default;
$yiq-text-light: white !default;
$yiq-contrasted-threshold: 150 !default;