覆盖 Bootstrap SCSS 变量 [英] Overriding Bootstrap SCSS Variables

问题描述

覆盖变量的最佳方法是什么?

What is the best way to override variables?

我发现以下顺序有效:

@import "bootstrap/_functions.scss";

$primary: red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

但是如果我想使用 Bootstrap 中的变量怎么办?例如:

But what if I want to use a variable from Bootstrap? For example:

@import "bootstrap/_functions.scss";

$primary: $red;

@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

这不会编译，因为 $red 变量没有定义.

This doesn't compile because the $red variable isn't defined.

我试过这个命令:

@import "bootstrap/_functions.scss";    
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";

$primary: $red;

这有效，但仅适用于某些元素.例如 bootstap/_variables.scss 包括:

Which works but only for some elements. For example bootstap/_variables.scss includes:

$link-color: $primary !default;

$link-colour 变量不使用覆盖，而是使用默认值.

The $link-colour variable doesn't use the override and instead uses the default value.

有什么想法吗?

推荐答案

我认为您必须设置任何其他使用 $link-color 的变量(即:$btn-link-color) 并将新颜色合并到 $theme-colors 映射中...

I think you'd have to set any other vars that use $link-color (ie: $btn-link-color) and merge the new colors into the $theme-colors map...

@import "functions";
@import "variables";
@import "mixins";

$primary: $red;
$link-color: $primary;
$btn-link-color: $primary;

$theme-colors: map-merge(
  $theme-colors,
  (
    "primary": $primary
  )
);

@import "bootstrap";

演示

这篇关于覆盖 Bootstrap SCSS 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！