Від автора: для включення миксинов в документ використовується директива @include. Вона обов’язково повинна містити ім’я міксина, а також опціонально через Sass include можуть передаватися додаткові аргументи. Стилі, що визначаються миксином, можуть бути включені в поточний правило.
У наступному прикладі продемонстровано включення міксина у файлі SCSS:
Mixin example of sass
Example include using
Different Colors
- Red
- Green
- Blue
Потім створіть файл sample.scss.
@mixin style {
.cont{
background-color: #77C1EF;
color: #ffffff;
}
h3 {
color: #ffffff;
}
}
@include style;
За допомогою наступної команди ви можете вказати SASS переглядати файл і оновлювати CSS кожен раз, коли змінюється файл SASS:
sass –watch C:\ruby\lib\sass\sample.scss:sample.css
Потім виконайте наведену вище команду; вона автоматично створить файл sample.css з наступним кодом:
.cont {
background-color: #77C1EF;
color: #ffffff;
}
h3 {
color: #ffffff;
}
Результат на виході
Давайте виконаємо наступні дії, щоб побачити, як працює наведений вище код:
Збережіть наведений вище html-код у файлі sample.htm.
Відкрийте HTML-файл у браузері, ви повинні побачити наступне:
