И не споткнуться об @extend ...
2026-02-26 22:55 Diff
https://ru.hexlet.io/blog/posts/i-ne-spotknutsya-ob-extend

Не могла понять, по каким правилам компилируется Sass в случае с @extend. Пробую на каких-то простых примерах — всё ясно. Чуть-чуть усложняю код — и всё разлетается. Стала смотреть документацию и разные статьи, нашла хорошее объяснение и рекомендации и захотелось поделиться. Сначала написала в обсуждениях к уроку, но там только Никита прочитал :-)

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

Вот пример из статьи "What Nobody Told You About Sass's @extend". Догадайтесь, какой код будет здесь на выходе?

Подсказка, вернее ответ для «не гениев» (думаю, окажусь в хорошей большой компании :-)

Вот тут более понятное объяснение и совет, как писать код при использовании @extend:

Автор предупреждает, что его решение тоже не идеально, да и статья довольно старая (2014 года), но объяснения и примеры здесь показались мне более лёгкими для понимания, чем в документации.

Очень примитивно говоря: Использовать @extend только с шаблонными селекторами.

То есть вместо:

Пишем

И вместо

Пишем

Вот, кстати, ссылка на документацию (на русском и на английском).

Для себя делаю вывод: @extend с использованием классов – это для самых смелых и сообразительных. А я уж лучше поосторожничаю. Всё-таки все эти надстройки предназначены для ускорения работы, а не для ввода в мысленный ступор и потери времени и веры в собственные умственные способности.

Ну и совсем тихонько в сторону: Не употребляйте @extend вместе с классами. Не смешивайте. Наутро голова болеть будет ;-)