0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><strong>Не могла понять, по каким правилам<a>компилируется Sass</a>в случае с @extend. Пробую на каких-то простых примерах - всё ясно. Чуть-чуть усложняю код - и всё разлетается. Стала смотреть документацию и разные статьи, нашла хорошее объяснение и рекомендации и захотелось поделиться. Сначала написала в обсуждениях к уроку, но там только Никита прочитал :-)</strong></p>
1
<p><strong>Не могла понять, по каким правилам<a>компилируется Sass</a>в случае с @extend. Пробую на каких-то простых примерах - всё ясно. Чуть-чуть усложняю код - и всё разлетается. Стала смотреть документацию и разные статьи, нашла хорошее объяснение и рекомендации и захотелось поделиться. Сначала написала в обсуждениях к уроку, но там только Никита прочитал :-)</strong></p>
2
<p>У директивы @extend совершенно неочевидный механизм компиляции и, если не обратить на это внимание, можно неожиданно для себя получить в CSS много кода непонятного происхождения. Или же ошибки при компиляции, которые остановят всю работу.</p>
2
<p>У директивы @extend совершенно неочевидный механизм компиляции и, если не обратить на это внимание, можно неожиданно для себя получить в CSS много кода непонятного происхождения. Или же ошибки при компиляции, которые остановят всю работу.</p>
3
<p><strong><a>Вот пример из статьи "What Nobody Told You About Sass's @extend"</a></strong>. Догадайтесь, какой код будет здесь на выходе?</p>
3
<p><strong><a>Вот пример из статьи "What Nobody Told You About Sass's @extend"</a></strong>. Догадайтесь, какой код будет здесь на выходе?</p>
4
<p>Подсказка, вернее ответ для "не гениев" (думаю, окажусь в хорошей большой компании :-)</p>
4
<p>Подсказка, вернее ответ для "не гениев" (думаю, окажусь в хорошей большой компании :-)</p>
5
<p><strong><a>Вот тут более понятное объяснение и совет, как писать код при использовании @extend:</a></strong></p>
5
<p><strong><a>Вот тут более понятное объяснение и совет, как писать код при использовании @extend:</a></strong></p>
6
<p>Автор предупреждает, что его решение тоже не идеально, да и статья довольно старая (2014 года), но объяснения и примеры здесь показались мне более лёгкими для понимания, чем в документации.</p>
6
<p>Автор предупреждает, что его решение тоже не идеально, да и статья довольно старая (2014 года), но объяснения и примеры здесь показались мне более лёгкими для понимания, чем в документации.</p>
7
<p>Очень примитивно говоря: Использовать @extend только с шаблонными селекторами.</p>
7
<p>Очень примитивно говоря: Использовать @extend только с шаблонными селекторами.</p>
8
<p>То есть вместо:</p>
8
<p>То есть вместо:</p>
9
<p>Пишем</p>
9
<p>Пишем</p>
10
<p>И вместо</p>
10
<p>И вместо</p>
11
<p>Пишем</p>
11
<p>Пишем</p>
12
<p>Вот, кстати, ссылка на документацию (<a>на русском</a>и<a>на английском</a>).</p>
12
<p>Вот, кстати, ссылка на документацию (<a>на русском</a>и<a>на английском</a>).</p>
13
<p>Для себя делаю вывод: @extend с использованием классов - это для самых смелых и сообразительных. А я уж лучше поосторожничаю. Всё-таки все эти надстройки предназначены для ускорения работы, а не для ввода в мысленный ступор и потери времени и веры в собственные умственные способности.</p>
13
<p>Для себя делаю вывод: @extend с использованием классов - это для самых смелых и сообразительных. А я уж лучше поосторожничаю. Всё-таки все эти надстройки предназначены для ускорения работы, а не для ввода в мысленный ступор и потери времени и веры в собственные умственные способности.</p>
14
<p>Ну и совсем тихонько в сторону: Не употребляйте @extend вместе с классами. Не смешивайте. Наутро голова болеть будет ;-)</p>
14
<p>Ну и совсем тихонько в сторону: Не употребляйте @extend вместе с классами. Не смешивайте. Наутро голова болеть будет ;-)</p>