Проникновение тени внутри СКС

angular sass

2144 просмотра

3 ответа

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

@Component({
selector: 'my-selector',
styles: [
    require('./my.style.scss'),
    ':host >>> .mystyle { background-color: green }'
],
templateUrl: './my.template.html'
})
Автор: doorman Источник Размещён: 08.11.2019 11:22

Ответы (3)


10 плюса

Решение

AFAIK >>>не поддерживается в SASS, потому что этот комбинатор не вошел в стандарт CSS. У Angular есть своя собственная реализация для эмуляции поддержки.

AFAIR, использующий только пробел вместо того, >>>имеет тот же эффект в Angular2 с ViewEncapsulation.Emulated(по умолчанию).

Использование пробела, кажется, не эквивалентно >>>и /deep/больше.

Пример плунжера

/deep/эквивалентно >>>Angular, но /deep/хорошо работает только с SASS.

Обновить

SASS устарел >>>и введен ::ng-deepдля специальной угловой поддержки (отсюда ng-и название).
Последние версии Angular 4 уже поддерживают ::ng-deepи также устарели >>>.

В документах упоминается, что ::ng-deepэто также устарело, но это по другой причине. Когда все браузеры поддерживают теневой DOM с соответствующим заголовком, ViewEncapsulation.Emulated(по умолчанию) будет отброшено и Nativeстанет по умолчанию и ::ng-deepустареет.

обновление 2

::slotted теперь поддерживается всеми новыми браузерами и может использоваться с `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Автор: Günter Zöchbauer Размещён: 20.08.2016 03:35

6 плюса

Хотя >>>и /deep/предполагается, что это эквивалентно, я обнаружил, что замена >>>оператора на /deep/работает при использовании .scssфайлов.

Автор: CharlyDelta Размещён: 06.10.2016 09:24

1 плюс

/deep/ изначально поддерживалась в браузерах как теневой DOM-пирсинг потомок комбинатора, но действительно устарела (и удалена в Chrome 63).

Но, поскольку Angular предлагает (и по умолчанию) эмулированную реализацию теневого DOM (которая не использует собственную реализацию теневого DOM, его использование /deep/не связано с использованием собственного браузера - перегружено для собственной реализации и не выводится в окончательном CSS). Таким образом, использование /deep/в эмулированном теневом DOM стиле encapsulation ( encapsulation: ViewEncapsulation.Emulated) по-прежнему работает во всех браузерах.

Однако, поскольку идея состоит в том, чтобы перейти к собственной инкапсуляции (из эмулируемой), Angular устарела /deep/в его собственной эмулированной реализации (хотя она все еще работает, и технически всегда могла).

Автор: craigmichaelmartin Размещён: 04.01.2018 07:27
Вопросы из категории :
32x32