Получить разные темы в начальной загрузке в разных видах

Я бы хотел создавать темы для страниц с помощью начальной загрузки, но на некоторых страницах я хотел бы создавать темы только для кнопок и оставить поля ввода такими, какие они есть, в то время как на других я хотел бы сделать это наоборот, а только для полей ввода а не кнопки.

Я хотел бы иметь возможность написать что-то подобное

На странице 1:

@import input-theming.css... использовать стили по умолчанию для кнопок

На странице 2:

@import button-theming.css... использовать стили для ввода по умолчанию

Я уже думал о модульности моего custom.scss в компонентах, так что я в каждом компоненте создаю отдельную тему, такую ​​как вводы, кнопки, таблицы и т. Д. Но тогда мне нужно будет создать файл custom.scss для каждого комбинация тех модулей, которая кажется сложной.

То, что я хотел бы, это способ вернуться к поведению по умолчанию некоторых частей начальной загрузки, хотя я настроил их по-другому в файле custom.scss. Возможно ли это без создания разных файлов custom.scss, которые содержат только разные части начальной загрузки?

Источник

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>

демонстрация

Источник
Другие вопросы по тегам