Sass content — Передача блоків контенту у міксин

21

Від автора: блок стилів передається у міксин, щоб потім бути вміщеним у стилях. Стилі включаються у міксин в місці, де розташована директива Sass content.

Діапазон змінних і блоки контенту

Блок контенту оцінюється в діапазоні, який передається у міксин, де блок був визначений. У наступному прикладі продемонстровано передача блоків контенту у міксин в файлі SCSS: pass_content.htm

Mixin example of sass

Example using passing content blocks

Different Colors

  • Red
  • Green
  • Blue

Після цього створіть файл sample.scss.

@mixin element {
@content;
}
@include element {
.block {
color: green;
}
}

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

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

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

.block {
color: green;
}

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

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

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

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

Sass content — Передача блоків контенту у міксин