根据身体类别覆盖Bootstrap 4中的原色？答案

【问题标题】：Override primary color in Bootstrap 4 depending on body class?根据身体类别覆盖Bootstrap 4中的原色？
【发布时间】：2018-03-05 06:35:43
【问题描述】：

我有一个网站，每个部分都有自己的原色。

我想在 Bootstrap 4 的 Sass 代码中添加一些内容，以根据我设置的主体类覆盖原色。

我有这个，但到目前为止还不行：

$theme-colors: () !default;
$theme-colors: map-merge((
    // primary: $blue,
    // secondary: $gray-600,
    success: $green,
    info: $cyan,
    warning: $yellow,
    danger: $red,
    light: $gray-100,
    dark: $gray-800
), $theme-colors) !default;

// override according to portal
html {
    &.portal-1 {
        $theme-colors: map-merge((
            primary: #f1b36d
        ), $theme-colors);
    }

这如何在 Bootstrap 4 的 Sass 文件中实现？

【问题讨论】：

stackoverflow.com/questions/35521721/sass-and-browser-rendering
这里是一个很好的解释如何做到这一点：stackoverflow.com/questions/41791461/…
请记住，Sass 是在运行之前编译成静态 CSS 的，所以它永远不会知道浏览器中发生的事情的上下文。因此，如果您询问是否可以根据页面上存在的类覆盖整个 Bootstrap 的 Sass 文件中的变量，您不能。您需要修改 Sass 以级联到该类的所有受影响元素并在整个过程中替换变量。或者，您可以查看 CSS 自定义变量，但目前还没有浏览器支持。

标签： css twitter-bootstrap sass bootstrap-4

【解决方案1】：

您无法更改已在客户端动态转换为静态 CSS 的 sass 变量。但是，要构建主题系统，您可以应用以下选项之一：

1.生成独立主题

在您的构建系统中放置一个主题参数，它将生成不同的主题 CSS 例如：grunt build-sass --theme=brown

var themes = {
    "default": "https://bootswatch.com/flatly/bootstrap.min.css",
    "cerulean" : "https://bootswatch.com/cerulean/bootstrap.min.css"
}

// Use something like this to add theme: (You can also append instead of overriding whole head html)
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML    += '<link type="text/css" rel="stylesheet" href="' + themes.cerulean +'">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;

2。根据父类更改属性

您可以拥有一个定义通用 CSS 的基本 CSS。然后您可以根据父级拥有单独的 CSS 属性

在以下示例中，将 green-theme 类更新为 blue-theme，反之亦然

div[class^=component] {
  display: inline-block;
  width:150px;
  height: 150px;
  margin: 1em;
  border: 1px solid black;
  box-shadow: 1px 1px 5px gray;
  border-radius:1em;
}

/* Colors*/
$blue1: #3066BE; 
$blue2: #090C9B;
$green1: #5C946E; 
$green2: #80C2AF;

/* Blue Theme */
.blue-theme {
  .component1 {
    background-color: $blue1;
  }
  
  .component2 {
    background-color: $blue2;
   }
}
/* Green Theme */
.green-theme {
  .component1 {
    background-color: $green1;
  }
  
  .component2 {
    background-color: $green2;
   }
}

<div class="green-theme" id="mainBody">
    <div class="component1">
    </div>
    
     <div class="component2">
    </div>
</div>

*Run Snippet 不起作用，因为我们使用的是 SCSS *

【讨论】：

【解决方案2】：

制作一个这样的scss文件结构，

- vendors
  - bootstrap
    - stylesheets /*[Bootstrap 4 official sass files]*/
      - _bootstrap.scss
- scss
  - themes
    - _theme-1.scss
    - _theme-2.scss
  - _variables.scss
  - styles.scss
  - portal-1.scss
  - portal-2.scss

_variables.scss

@import "../vendors/bootstrap/stylesheets/bootstrap/variables";
@import "../vendors/bootstrap/stylesheets/bootstrap/mixins";
/* override bootstrap default variables ... */
/* custom variables with !default ... */

styles.scss

@import "variables";
@import "../vendors/bootstrap/stylesheets/bootstrap";
/* custom styles ... */

主题/_theme-1.scss

@import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary:         #428bca
$brand-success:         #5cb85c;
$brand-info:            #5bc0de;
$brand-warning:         #f0ad4e;
$brand-danger:          #d9534f;
$body-bg:               #eff;

主题/_theme-2.scss

@import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary:         #C04848;

portal-1.scss

@import "themes/_theme-1";
/* change style with new variable bootstrap default components ... */
.portal-1 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* custom style overrides ... */
}

portal-2.scss

@import "themes/_theme-2";
/* change style with new variable bootstrap default components ... */
.portal-2 {
    @import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
    @import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
   /* custom styles from style.scss overrides ... */
}

sass编译后我们会得到3个文件styles.css、portal-1.css和portal-2.css。默认使用 style.css，其他包含在 head 标签中进行主题化。

<html>
    <head>
         <link href="styles.css" rel="stylesheet" />
         <link href="portal-1.css" rel="stylesheet" />
    </head>
    <body>
        <button class="btn btn-primary">BUTTON</button>
        <div class="portal-1">
            <button class="btn btn-primary">BUTTON</button>
        </div>
    </body>
</html>

【讨论】：

【解决方案3】：

注意：在寻找了一个简单的解决方案之后，我虽然可以避免任何试图实现这一点的人的痛苦：

您可以使用 CSS 变量来实现这一点。

在主引导 github 页面 Github Issue 上有一个线程，用户 @johanlef 发布了一个要点，展示了他的方法和相关代码 gist。

然后你可以确保css变量在你的页面中被初始化

.body.theme1{
   --primary: #5d8be5;
}

我用于我的多租户网站之一，效果很好。

【讨论】：