Sass mixin для кастомизации select2, есть ли уже такой?

Question

[furashcka]

Здравствуйте! Для выпадающих списков использую Select2
Чтобы сменить внешний вид я задаю тему:

$(".js-example-theme-single").select2({
    theme: "example"
});

И после задаю стили через (sass):

.select2-container--example {
    /*
    и тут задаю дочерним элементам стили
    */
}

Такой способ по времени отнимает около 30 минут и как по мне вызывает дублирование кода, каждый раз пишу одни и те же имена селекторов за исключением .select2-container--example если на странице используется больше 1-го выпадающего списка...

Есть мысль сделать mixin... где задавать только класс модификатора .select2-container--example и стили, сам вопрос. Не изобретаю ли я велосипед? Есть ли уже готовые миксины для этой задачи? Спасибо!

Answer 1

[Дима Барсуков]

Вероятно, задать тему нужно глобально $.fn.select2.defaults.set("theme", "classic");
И в css использовать более общий селектор?

Comments

[furashcka]

Выпадающие списки отличаются внешним видом... меня устраивает такой способ ( указывая модификатор-тему example => .select2-container--example ) но когда приходится 3-4 списка стилизовать то получается каша: с длинными именами селекторов которые повторяются, за исключением того что они находятся в теге с модификатором:
$(".js-example-theme-single1").select2({
theme: "example1"
});
$(".js-example-theme-single2").select2({
theme: "example2"
});
$(".js-example-theme-single3").select2({
theme: "example3"
});
.select2-container--example1 {}
.select2-container--example2 {}
.select2-container--example3 {}
Все остальные имена классов остаются те же самые, тут явно нужен sass mixin пробовал искать что-то подобное в google и github ничего не нашел... думаю писать свой mixin но возможно есть уже такой mixin но и за своего плохого английского я не нашел(

Answer 2

[askouev]

А разве нельзя сразу редактировать подключаемый файл CSS этого плагина ?
Я конвертировал этот файл в SASS, редактировал, и он уже попадает в общий скомпилированный CSS. Всё работает.