Від автора: директива @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-файл у браузері, ви повинні побачити наступне:
