WebPack / Метод репликации директивы @apply Tailwind CSS для удаления от @extend в SASS - PullRequest
Новая
       70

WebPack / Метод репликации директивы @apply Tailwind CSS для удаления от @extend в SASS

0 голосов
/ 25 февраля 2019

Я работаю над внутренней CSS-структурой / методологией, которая находится где-то между ITCSS и Tailwind.

Мы используем множество служебных классов, но иногда фактическое имя класса становится слишком длинным, и мы хотимИзвлеките его в свой собственный класс.

Вот псевдо-пример: 

<button class="p-2 bg-primary elevate-1">Click Me</button

Что я хочу сделать: 

.btn {
    @extend .p-2;
    @extend .bg-primary;
    @extend .elevate-1;
}

Я знаю, что @extend следует избегатьпоэтому не хотите использовать этот метод.

Существует ли плагин веб-пакета, который позволяет без проблем использовать @extend?

Или кто-нибудь знает, как Адам Уотан создал директиву @apply?: https://tailwindcss.com/docs/extracting-components/#extracting-utility-patterns-with-apply

Взято из документов, он может сделать это: 

.btn-blue {
    @apply bg-blue text-white font-bold py-2 px-4 rounded;
}

Это написанная им функция SASS, и если да, то какая-нибудь информация о том, как создать подобное?

Спасибо.

...