SASS 允许您嵌套导入。因此,您可以为每个“主题”(自定义组合)使用父类,然后将适当的主题 CSS 类添加到每个页面的 HTML 父容器(html、body、.container 等)。这允许您将所有 SASS 覆盖/更改保存在一个custom.scss
文件中。
@import "bootstrap/functions";
@import "bootstrap/mixins";
@import "bootstrap/variables";
.theme-1 {
/* change the button style */
.btn-primary {
@include button-variant(green, green);
}
}
.theme-2 {
/* change the input style */
$input-bg: #ddd;
@import "bootstrap/forms"
}
@import "bootstrap"
HTML 第 1 页(自定义按钮)
<body class="theme-1">
<div class="container py-2">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="addon">Button</button>
</div>
</div>
</div>
</div>
</div>
</body>
HTML 页 2(自定义输入)
<body class="theme-2">
<div class="container py-2">
<div class="row">
<div class="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="addon">Button</button>
</div>
</div>
</div>
</div>
</div>
</body>
演示