Question

我想用引导程序为页面主题，但是在某些页面中，我只想对按钮主题化，并保持输入字段不变，而在另一些页面中，我想反过来做，仅主题化输入字段而不是按钮。

我希望能够写类似的东西

在第1页：

@import input-theming.css ...对按钮使用默认样式

在第2页：

@import button-theming.css ...对输入使用默认样式

我已经考虑过将custom.scss模块化在组件中，以便在每个组件中以不同的部分为主题，例如输入，按钮，表格等。但是后来我必须创建一个自定义.scss文件，这些模块的每个组合看起来都很复杂。

我想要的是一种恢复引导程序某些部分的默认行为的方法，尽管我在custom.scss中将它们的主题不同。如果不生成仅以引导程序的不同部分为主题的不同custom.scss文件，是否有可能？

Answer 1

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>

Demo

在不同的视图中获得不同的引导主题

1 个答案: