我有一个网站,每个部分都有自己的原色。
我想在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文件中实现?
答案 0 :(得分:1)
您无法在客户端动态更改已转换为静态CSS的sass变量。 但是,要构建主题系统,您可以应用以下选项之一:
<强> 1。生成独立主题
在构建系统中放置一个主题参数,它将生成不同的主题CSS Ex: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;
}
}
&#13;
<div class="green-theme" id="mainBody">
<div class="component1">
</div>
<div class="component2">
</div>
</div>
&#13;
* Run Snippet因使用SCSS *而无法正常工作
答案 1 :(得分:1)
制作这样的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
@import "../vendors/bootstrap/stylesheets/bootstrap/variables";
@import "../vendors/bootstrap/stylesheets/bootstrap/mixins";
/* override bootstrap default variables ... */
/* custom variables with !default ... */
@import "variables";
@import "../vendors/bootstrap/stylesheets/bootstrap";
/* custom styles ... */
@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;
@import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #C04848;
@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 ... */
}
@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>