Sass extend не работает

Директива SASS @extend не работает с заполнителями ввода

У меня есть приложение ReactJS со стилями CSS, установленными для значений заполнителей внутри текстовых входов с использованием SASS. Следующий код работает без проблем (я пропустил стили для других поставщиков браузеров, поэтому покажу только webkit):

Но поскольку я использую тот же стиль для других поставщиков браузеров, то есть *:-moz-placeholder , *::placeholder и т. Д., Я хотел использовать директиву @extend , чтобы мой код оставался СУХИМ. Однако следующий код не работает :

Ошибки компиляции нет, и я без проблем использую директиву @extend в других местах моего приложения, просто она не работает с полями-заполнителями. Я не понимаю, почему, поскольку я предполагаю, что компилятор SASS просто заменяет директиву @extend фактическим стилем. РЕДАКТИРОВАТЬ . Оказывается, мое предположение было ошибочным. См. мой ответ ниже о том, как SASS компилирует директивы @extend в css.

2 ответа

Вам нужно сначала понять, что делает @extend . Расширение групп по всем правилам. Если вы хотите, чтобы ваш код оставался сухим, и это нормально, возможно, вы могли бы сделать некоторые @mixin для @include требуемых атрибутов.

Я обнаружил проблему. После компиляции я заглянул в свой файл main.css и увидел следующий код:

Проблема в том, что с этими псевдоселекторами их нельзя сгруппировать. Их набор правил должен быть отдельным, даже если они одинаковы для каждого селектора. Таким образом, это «проблема» компилятора SASS, поскольку группа селекторов, содержащих недопустимый, недействительна.

Другими словами, на момент этого ответа вы не могли использовать директиву @extend с этими конкретными селекторами.

Источник

@extend

При разработке страницы часто возникают случаи, когда один класс должен иметь все стили другого класса, а также свои собственные специфические стили. Например, методология БЭМ поощряет классы-модификаторы, которые относятся к тем же элементам, что и классы блоков или элементов. Но это может создать загроможденный HTML, склонный к ошибкам из-за того, что забыли включить оба класса, и может внести несемантические проблемы стиля в вашу разметку.

Правило Sass @extend решает эту проблему. Он написан @extend и сообщает Sass, что один селектор должен наследовать стили другого.

SCSS Syntax

Sass Syntax

CSS Output

Когда один класс расширяет другой, Sass стилизует все элементы, которые соответствуют расширителю, как если бы они также соответствовали расширяемому классу. Когда один селектор класса расширяет другой, он работает точно так же, как если бы вы добавили расширенный класс к каждому элементу в вашем HTML , который уже имел расширяющийся класс. Вы можете просто написать class=»error—serious» , и Sass позаботится о том, чтобы он был оформлен так, как если бы он также имел class=»error» .

Конечно, селекторы используются не только сами по себе в правилах стиля. Sass знает, что нужно расширять везде, где используется селектор. Это гарантирует, что ваши элементы будут стилизованы точно так, как если бы они соответствовали расширенному селектору.

SCSS Syntax

Sass Syntax

CSS Output

⚠️ Внимание!

Расширения разрешаются после компиляции остальной части вашей таблицы стилей. В частности, это происходит после разрешения родительских селекторов. Это означает, что если вы используете @extend .error , это не повлияет на внутренний селектор в .error < &__icon < . >> . Это также означает, что родительские селекторы в SassScript не могут видеть результаты расширения.

Как это работает permalink Как это работает

В отличие от миксин, которые копируют стили в текущее правило стиля, @extend обновляет правила стиля, содержащие расширенный селектор, так что они также содержат расширяющий селектор. При расширении селекторов Sass выполняет интеллектуальную унификацию:

Он никогда не генерирует селекторы вроде #main#footer , которые не могут соответствовать никаким элементам.

Это гарантирует, что сложные селекторы чередуются, так что они работают независимо от того, в каком порядке вложены элементы HTML.

Он максимально сокращает избыточные селекторы, при этом гарантируя, что специфичность больше или равна специфичности расширителя.

Он знает, когда один селектор совпадает со всем, что делает другой, и может комбинировать их вместе.

SCSS Syntax

Sass Syntax

CSS Output

💡 Интересный факт:

Вы можете напрямую получить доступ к интеллектуальной унификации Sass, используя функции выбора! Функция selector.unify() возвращает селектор, который соответствует пересечению двух селекторов, в то время как функция selector.extend() работает так же, как @extend , но с одним селектором.

⚠️ Внимание!

Поскольку @extend обновляет правила стиля, которые содержат расширенный селектор, их стили имеют приоритет в каскаде в зависимости от того, где появляются правила стиля расширенного селектора, а не в зависимости от того, где появляется @extend . Это может сбивать с толку, но помните: это тот же приоритет, который имели бы эти правила, если бы вы добавили расширенный класс в свой HTML !

Селекторы заполнителей permalink Селекторы заполнителей

Иногда вы хотите написать правило стиля, которое только предназначено для расширения. В этом случае вы можете использовать селекторы-заполнители, которые выглядят как селекторы классов, начинающиеся с % вместо . . Любые селекторы, которые включают заполнители, не включаются в вывод CSS , но расширяют их.

SCSS Syntax

Sass Syntax

CSS Output

Частные заполнители permalink Частные заполнители

Как и участники модуля, селектор-заполнитель можно пометить как частный, начав его имя с — или _ . Селектор частного заполнителя может быть расширен только внутри таблицы стилей, которая его определяет. Для любых других таблиц стилей это будет выглядеть так, как будто этого селектора не существует.

Область расширения permalink Область расширения

Когда одна таблица стилей расширяет селектор, это расширение будет влиять только на правила стиля, написанные в восходящих модулях, то есть на модули, которые загружаются этой таблицей стилей с помощью правила @use или правилоа @forward , модули, загруженные этими модулями, и так далее. Это помогает сделать ваши правила @extend более предсказуемыми, гарантируя, что они влияют только на стили, о которых вы знали, когда их писали.

⚠️ Внимание!

Расширения вообще не имеют области видимости, если вы используете правило @import . Они не только повлияют на каждую импортируемую вами таблицу стилей, но и повлияют на каждую таблицу стилей, которая импортирует вашу таблицу стилей, все остальное, что эти таблицы стилей импортируют, и так далее. Без @use , расширения будут глобальными.

Обязательные и необязательные расширения permalink Обязательные и необязательные расширения

Обычно, если @extend не соответствует ни одному селектору в таблице стилей, Sass выдаст ошибку. Это помогает защитить от опечаток или переименования селектора без переименования селекторов, которые от него наследуются. Расширения, требующие наличия расширенного селектора, являются обязательными.

Однако это не всегда может быть тем, что вам нужно. Если вы хотите, чтобы @extend не выполнял никаких действий, если расширенный селектор не существует, просто добавьте в конец !optional .

Расширения или Миксины? permalink Расширения или Миксины?

Расширения и примеси — это способы инкапсуляции и повторного использования стилей в Sass, что, естественно, поднимает вопрос о том, когда какой из них использовать. Миксины, очевидно, необходимы, когда вам нужно настроить стили с помощью аргументов, но что, если они всего лишь фрагменты стилей?

Как показывает опыт, расширения — лучший вариант, когда вы выражаете отношения между семантическими классами (или другими семантическими селекторами). Поскольку элемент с классом .error—serious является ошибкой, для него имеет смысл расширить .error . Но для несемантических коллекций стилей написание миксина может избежать каскадных головных болей и упростить настройку в дальнейшем.

💡 Интересный факт:

Большинство веб-серверов сжимают обслуживаемый ими CSS , используя алгоритм, который очень хорошо обрабатывает повторяющиеся фрагменты идентичного текста. Это означает, что, хотя миксины могут создавать больше CSS , чем расширять, они, вероятно, не существенно увеличат объем, необходимый вашим пользователям для загрузки. Так что выбирайте ту функцию, которая больше всего подходит для вашего варианта использования, а не ту, которая генерирует меньше всего CSS !

Ограничения permalink Ограничения

Запрещенные селекторы permalink Запрещенные селекторы

LibSass и Ruby Sass в настоящее время позволяют расширять составные селекторы, такие как .message.info . Однако это поведение не соответствует определению @extend : вместо стилизованных элементов, которые соответствуют расширяющему селектору, как если бы он имел class=»message info» , на который бы повлияли правила стиля, которые включали либо .message или .info , он стилизовал их только с помощью правил, включающих как .message и info .

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

Смотрите страницу критических изменений для получения более подробной информации.

Только простые селекторы — отдельные селекторы, такие как .info или a могут быть расширены. Если бы .message.info мог быть расширен, определение @extend говорит, что элементы, соответствующие расширителю, будут иметь такой стиль, как если бы они соответствовали .message.info . Это то же самое, что и сопоставление .message и .info , поэтому писать это вместо @extend .message, .info не принесет никакой пользы.

Точно так же, если бы .main .info можно было расширить, он бы делал (почти) то же самое, что и расширение .info самостоятельно. Тонкие различия не стоят того, чтобы выглядеть так, будто он делает что-то существенно другое, так что это тоже недопустимо.

SCSS Syntax

Sass Syntax

HTML -эвристика permalink HTML -эвристика

Когда @extend чередует сложные селекторы, он не генерирует все возможные комбинации селекторов предков. Многие из селекторов, которые он мог бы сгенерировать, вряд ли действительно будут соответствовать реальному HTML , и создание их всех сделало бы таблицы стилей слишком большими для очень небольшой реальной ценности. Вместо этого он использует эвристику: он предполагает, что предки каждого селектора будут самодостаточными, без чередования с предками других селекторов.

SCSS Syntax

Sass Syntax

CSS Output

Расширить в @media permalink Расширить в @media

Хотя @extend разрешен в @media и других at-правилах CSS , не разрешено расширять селекторы, которые появляются вне его at-правила. Это связано с тем, что расширяемый селектор применяется только в пределах данного медиа-контекста, и нет способа убедиться, что ограничение сохраняется в сгенерированном селекторе без дублирования всего правила стиля.

Источник

@extend

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. For example, the BEM methodology encourages modifier classes that go on the same elements as block or element classes. But this can create cluttered HTML, it’s prone to errors from forgetting to include both classes, and it can bring non-semantic style concerns into your markup.

Sass’s @extend rule solves this. It’s written @extend , and it tells Sass that one selector should inherit the styles of another.

SCSS Syntax

Sass Syntax

CSS Output

When one class extends another, Sass styles all elements that match the extender as though they also match the class being extended. When one class selector extends another, it works exactly as though you added the extended class to every element in your HTML that already had the extending class. You can just write class=»error—serious» , and Sass will make sure it’s styled as though it had class=»error» as well.

Of course, selectors aren’t just used on their own in style rules. Sass knows to extend everywhere the selector is used. This ensures that your elements are styled exactly as if they matched the extended selector.

SCSS Syntax

Sass Syntax

CSS Output

вљ пёЏ Heads up!

Extends are resolved after the rest of your stylesheet is compiled. In particular, it happens after parent selectors are resolved. This means that if you @extend .error , it won’t affect the inner selector in .error < &__icon < . >> . It also means that parent selectors in SassScript can’t see the results of extend.

How It Works permalink How It Works

Unlike mixins, which copy styles into the current style rule, @extend updates style rules that contain the extended selector so that they contain the extending selector as well. When extending selectors, Sass does intelligent unification:

It never generates selectors like #main#footer that can’t possibly match any elements.

It ensures that complex selectors are interleaved so that they work no matter which order the HTML elements are nested.

It trims redundant selectors as much as possible, while still ensuring that the specificity is greater than or equal to that of the extender.

It knows when one selector matches everything another does, and can combine them together.

SCSS Syntax

Sass Syntax

CSS Output

рџ’Ў Fun fact:

You can directly access Sass’s intelligent unification using selector functions! The selector.unify() function returns a selector that matches the intersection of two selectors, while the selector.extend() function works just like @extend , but on a single selector.

вљ пёЏ Heads up!

Because @extend updates style rules that contain the extended selector, their styles have precedence in the cascade based on where the extended selector’s style rules appear, not based on where the @extend appears. This can be confusing, but just remember: this is the same precedence those rules would have if you added the extended class to your HTML !

Placeholder Selectors permalink Placeholder Selectors

Sometimes you want to write a style rule that’s only intended to be extended. In that case, you can use placeholder selectors, which look like class selectors that start with % instead of . . Any selectors that include placeholders aren’t included in the CSS output, but selectors that extend them are.

SCSS Syntax

Sass Syntax

CSS Output

Private Placeholders permalink Private Placeholders

Like module members, a placeholder selector can be marked private by starting its name with either — or _ . A private placeholder selector can only be extended within the stylesheet that defines it. To any other stylesheets, it will look as though that selector doesn’t exist.

Extension Scope permalink Extension Scope

When one stylesheet extends a selector, that extension will only affect style rules written in upstream modules—that is, modules that are loaded by that stylesheet using the @use rule or the @forward rule, modules loaded by those modules, and so on. This helps make your @extend rules more predictable, ensuring that they affect only the styles you were aware of when you wrote them.

вљ пёЏ Heads up!

Extensions aren’t scoped at all if you’re using the @import rule. Not only will they affect every stylesheet you import, they’ll affect every stylesheet that imports your stylesheet, everything else those stylesheets import, and so on. Without @use , extensions are global.

Mandatory and Optional Extends permalink Mandatory and Optional Extends

Normally, if an @extend doesn’t match any selectors in the stylesheet, Sass will produce an error. This helps protect from typos or from renaming a selector without renaming the selectors that inherit from it. Extends that require that the extended selector exists are mandatory.

This may not always be what you want, though. If you want the @extend to do nothing if the extended selector doesn’t exist, just add !optional to the end.

Extends or Mixins? permalink Extends or Mixins?

Extends and mixins are both ways of encapsulating and re-using styles in Sass, which naturally raises the question of when to use which one. Mixins are obviously necessary when you need to configure the styles using arguments, but what if they’re just a chunk of styles?

As a rule of thumb, extends are the best option when you’re expressing a relationship between semantic classes (or other semantic selectors). Because an element with class .error—serious is an error, it makes sense for it to extend .error . But for non-semantic collections of styles, writing a mixin can avoid cascade headaches and make it easier to configure down the line.

рџ’Ў Fun fact:

Most web servers compress the CSS they serve using an algorithm that’s very good at handling repeated chunks of identical text. This means that, although mixins may produce more CSS than extends, they probably won’t substantially increase the amount your users need to download. So choose the feature that makes the most sense for your use-case, not the one that generates the least CSS !

Limitations permalink Limitations

Disallowed Selectors permalink Disallowed Selectors

LibSass and Ruby Sass currently allow compound selectors like .message.info to be extended. However, this behavior doesn’t match the definition of @extend : instead of styling elements that match the extending selector as though it had class=»message info» , which would be affected by style rules that included either .message or .info , it only styled them with rules that included both .message and info .

In order to keep the definition of @extend straightforward and understandable, and to keep the implementation clean and efficient, that behavior is now deprecated and will be removed from future versions.

Only simple selectors—individual selectors like .info or a —can be extended. If .message.info could be extended, the definition of @extend says that elements matching the extender would be styled as though they matched .message.info . That’s just the same as matching both .message and .info , so there wouldn’t be any benefit in writing that instead of @extend .message, .info .

Similarly, if .main .info could be extended, it would do (almost) the same thing as extending .info on its own. The subtle differences aren’t worth the confusion of looking like it’s doing something substantially different, so this isn’t allowed either.

SCSS Syntax

Sass Syntax

HTML Heuristics permalink HTML Heuristics

When @extend interleaves complex selectors, it doesn’t generate all possible combinations of ancestor selectors. Many of the selectors it could generate are unlikely to actually match real HTML , and generating them all would make stylesheets way too big for very little real value. Instead, it uses a heuristic: it assumes that each selector’s ancestors will be self-contained, without being interleaved with any other selector’s ancestors.

SCSS Syntax

Sass Syntax

CSS Output

Extend in @media permalink Extend in @media

While @extend is allowed within @media and other CSS at-rules, it’s not allowed to extend selectors that appear outside its at-rule. This is because the extending selector only applies within the given media context, and there’s no way to make sure that restriction is preserved in the generated selector without duplicating the entire style rule.

Источник