Не могла понять, по каким правилам компилируется Sass в случае с @extend. Пробую на каких-то простых примерах — всё ясно. Чуть-чуть усложняю код — и всё разлетается. Стала смотреть документацию и разные статьи, нашла хорошее объяснение и рекомендации и захотелось поделиться. Сначала написала в обсуждениях к уроку, но там только Никита прочитал :-)
У директивы @extend совершенно неочевидный механизм компиляции и, если не обратить на это внимание, можно неожиданно для себя получить в CSS много кода непонятного происхождения. Или же ошибки при компиляции, которые остановят всю работу.
Вот пример из статьи "What Nobody Told You About Sass's @extend". Догадайтесь, какой код будет здесь на выходе?
.message + .message {
margin-bottom: .5em;
}
.message-error {
@extend .message;
}
Подсказка, вернее ответ для «не гениев» (думаю, окажусь в хорошей большой компании :-)
.message + .message,
.message-error + .message-error,
.message + .message-error,
.message-error + .message {
margin-bottom: .5em;
}
Вот тут более понятное объяснение и совет, как писать код при использовании @extend:
Автор предупреждает, что его решение тоже не идеально, да и статья довольно старая (2014 года), но объяснения и примеры здесь показались мне более лёгкими для понимания, чем в документации.
Очень примитивно говоря: Использовать @extend только с шаблонными селекторами.
То есть вместо:
.info {color: blue;}
Пишем
.info, %info {color: blue;}
И вместо
.modal-info {
//more code …
@extend .info;
}
Пишем
.modal-info {
//more code …
@extend %info;
}
Вот, кстати, ссылка на документацию (на русском и на английском).
Для себя делаю вывод: @extend с использованием классов – это для самых смелых и сообразительных. А я уж лучше поосторожничаю. Всё-таки все эти надстройки предназначены для ускорения работы, а не для ввода в мысленный ступор и потери времени и веры в собственные умственные способности.
Ну и совсем тихонько в сторону: Не употребляйте @extend вместе с классами. Не смешивайте. Наутро голова болеть будет ;-)