Блоки контента в миксинах в SASS
Для передачи блока стилей внутри
миксина используем директиву @content,
на место которой и встанут нужные нам стили.
Рассмотрим пример:
@mixin active {
* div {
@content;
}
}
@include active {
#block {
color: red;
}
}
Результат компиляции:
* div #block {
color: red;
}
Необходимо знать, что если
мы указываем директиву @content
более одного раза или внутри цикла,
то столько же раз будет вызываться
и блок стилей.
@mixin active {
div {
@content;
}
navbar {
@content;
}
}
@include active {
#block {
color: red;
}
button {
color:green;
}
}
После компиляции мы увидим:
div #block {
color: red;
}
div button {
color: green;
}
navbar #block {
color: red;
}
navbar button {
color: green;
}
Расскажите, каким будет результат компиляции следующего кода:
@mixin super-link {
a {
@content;
}
}
@include super-link {
color: blue;
text-decoration: underline;
}
Расскажите, каким будет результат компиляции следующего кода:
@mixin super-link {
a {
@content;
}
a .primary-link{
@content;
font-weight: bold;
}
}
@include super-link {
color: blue;
text-decoration: underline;
}
Пусть у вас есть следующий миксин:
@mixin colors {
...
}
Используя директиву @content
установите для всех ссылок, относящихся
к #primary синий цвет шрифта
и волнистое подчеркивание.