Директива Sass @extend

В @extendдирективата ви позволява да споделяте набор от CSS свойства от един селектор на друг.

В @extendдирективата е полезна, ако сте почти идентичен стил елементи, които се различават само в някои малки детайли.

Следващият пример на Sass първо създава основен стил за бутони (този стил ще се използва за повечето бутони). След това създаваме един стил за бутон „Отчет“ и един стил за бутон „Изпращане“. И двата бутона „Отчет“ и „Изпращане“ наследяват всички свойства на CSS от класа .button-basic чрез @extendдирективата. В допълнение, те имат свои собствени цветове, определени:

Синтаксис на SCSS:

След компилация CSS ще изглежда така:

CSS изход:

Използвайки @extendдирективата, не е необходимо да указвате няколко класа за елемент във вашия HTML код, като този: <button class = „button-basic button-report“> Докладвайте това </button>. Трябва само да посочите .button-report, за да получите и двата набора от стилове.

В @extendдирективата помага да запазите вашата Sass код много суха.