Sass — визначення і використання миксинов

16

Від автора: директива @mixin використовується для визначення миксинов. Вона включає додаткові змінні і аргументи, які слідують після імені міксина.

Приклад

Наступний приклад ілюструє, як використовуються міксини Sass у файлі SCSS: sample.htm

Mixin example of sass

Example include using

Directive is used to define the Mixins, it includes variables and argument optionally.

Потім створіть файл sample.scss.

@mixin style {
.cont{
color: #77C1EF;
}
}
@include style;

За допомогою наступної команди ви можете вказати SASS переглядати файл і оновлювати CSS кожен раз, коли змінюється файл SASS:

sass —watch C:\ruby\lib\sass\sample.scss:sample.css

Потім виконайте наведену вище команду; вона автоматично створить файл sample.css з наступним кодом —

.cont {
color: #77C1EF;
}

Результат на виході

Давайте виконаємо наступні дії, щоб побачити, як працює наведений вище код:

Збережіть наведений вище HTML-код у файлі sample.htm.

Відкрийте HTML-файл у браузері, ви повинні побачити наступне:

Sass — визначення і використання миксинов