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