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

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

0 голосов
/ 09 января 2019

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

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 09 января 2019

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>

Демо

...