Миксини

В @mixinдирективата ви позволява да създавате CSS код, който трябва да се използва повторно в рамките на сайта.

В @includeдирективата се създава, за да ви позволи да използвате (включително) на Mixin.

Определяне на миксин

Смесината е дефинирана с @mixinдирективата.

Синтаксис на Sass @mixin:

Следващият пример създава комбинация, наречена „važan текст“:

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

Съвет: Съвет за тирета и долна черта в Sass: Тиретата и долните знаци се считат за еднакви. Това означава, че @mixin important-text {} и @mixin important_text {} се считат за един и същ миксин!

Използване на Mixin

В @includeдирективата се използва за включване на Mixin.

Синтаксис на Sass @include mixin:

И така, за да включим миксина с важен текст, създаден по-горе:

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

Транспилаторът Sass ще преобразува горното в нормален CSS:

CSS изход:

Смесването може да включва и други смеси:

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