在Bootstrap中使用custom.scss将一个变量赋值给另一个变量。

huangapple go评论90阅读模式
英文:

Assigning a variable to a variable in bootstrap using custom.scss

问题

我已经找了半天的答案了。我试图将$primary变量的值从默认的$blue更改为$orange变量。如果我像文档中这样做:

  1. $primary: red;
  2. @import '../bootstrap-5.2.3/scss/_variables';
  3. @import "../bootstrap-5.2.3/scss/bootstrap";

这样做是有效的,但不是我要找的。我试图像这样将一个变量分配给另一个变量:

  1. @import '../bootstrap-5.2.3/scss/_variables';
  2. @import "../bootstrap-5.2.3/scss/bootstrap";
  3. $primary: $orange;

无论我是在声明之后还是之前导入bootstrap,都无法在编译为CSS后将$orange变量分配给$primary。

我做错了什么?
谢谢。

英文:

I'm looking an answer for half a day now. I'm trying to change $primary variable value from default $blue to $orange variable.
If I do it like in the docs:

  1. $primary: red;
  2. @import '../bootstrap-5.2.3/scss/_variables';
  3. @import "../bootstrap-5.2.3/scss/bootstrap";

It works but it's not what I'm looking for. I'm trying to assign a variable to a variable like this:

  1. @import '../bootstrap-5.2.3/scss/_variables';
  2. @import "../bootstrap-5.2.3/scss/bootstrap";
  3. $primary: $orange;

However I'm trying to do this, either by importing bootstrap after or before the declaration, there is no way I'd have an $orange variable assigned to $primary after compilation to css.

What am I doing wrong ?
Thanks.

答案1

得分: 1

以下是翻译好的部分:

  1. @import "functions"; // 必需
  2. @import "variables"; // 必需因为我们在引用现有的 $orange 变量
  3. $primary: $orange; // 设置主色
  4. // 与现有的 theme-colors 映射合并
  5. $theme-colors: map-merge($theme-colors, (
  6. "primary": $primary
  7. ));
  8. @import "bootstrap";

链接:https://codeply.com/p/RaDCJdXvE0

另请参考:https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color

英文:

For the latest Bootstrap 5.3, the order would be...

  1. @import "functions"; // required
  2. @import "variables"; // required because we're referring to existing $orange var
  3. $primary: $orange; // set primary
  4. // merge with existing theme-colors map
  5. $theme-colors: map-merge($theme-colors, (
  6. "primary": $primary
  7. ));
  8. @import "bootstrap";

https://codeply.com/p/RaDCJdXvE0

Also see: https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color

huangapple
  • 本文由 发表于 2023年3月31日 23:01:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/75900004.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定