Sass — включення миксинов з допомогою директиви @include

17

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

Sass — включення миксинов з допомогою директиви @include