Я пытаюсь заставить работать вложенный scss, но не могу с angular. Может ли кто-нибудь взглянуть на мой образец репозитория?
Вот мой scss, и я ожидаю, что у моей карты будет зеленый фон.
СКСС
.card {
@apply flex flex-col bg-neutral-700 border shadow-sm rounded-xl p-4 md:p-5 m-1 md:m-3 text-white;
.primary {
@apply bg-green-500;
}
.card-body {
@apply flex flex-col -m-1.5 overflow-x-auto p-1.5 min-w-full align-middle overflow-hidden;
}
}
HTML
<div class = "card primary">
<div class = "card-body">
I should be green background
</div>
</div>
https://github.com/rontran/angular-nested/tree/main
🤔 А знаете ли вы, что...
Angular предоставляет средства для обработки событий и пользовательского ввода.
Пожалуйста, используйте приведенный ниже код:
.card {
@apply flex flex-col bg-neutral-700 border shadow-sm rounded-xl p-4 md:p-5 m-1 md:m-3 text-white;
&.primary {
@apply bg-green-500;
}
.card-body {
@apply flex flex-col -m-1.5 overflow-x-auto p-1.5 min-w-full align-middle overflow-hidden;
}
}
В настоящее время ваш SCSS, преобразованный в CSS,
.card {}
.card .primary {}
.card .card-body {}
Вам нужно использовать оператор &, чтобы сказать «скопировать содержимое родительского элемента в этот селектор»:
.card {
&.primary {}
.card-body {}
}
Это тогда дает
.card {}
.card.primary {}
.card .card-body {}