Все статьи | Блог студента

И не споткнуться об @extend ...

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
И не споткнуться об @extend ...  главное изображение

Не могла понять, по каким правилам компилируется 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 вместе с классами. Не смешивайте. Наутро голова болеть будет ;-)

Аватар пользователя Anna kra_
Anna kra_ 05 ноября 2020
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
18 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
18 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
18 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
18 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
18 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
18 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
18 мая 5 месяцев