Инструменты пользователя
web_designe:sass:mixin
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
web_designe:sass:mixin [2020/01/26 17:49] werwolf |
web_designe:sass:mixin [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 218: | Строка 218: | ||
| - | <sxh scsshighlight:2; title: index.scss> | + | <sxh scss; highlight:2; title: index.scss> |
| .test4{//Миксин с оператором рест | .test4{//Миксин с оператором рест | ||
| @include box-shadow(1px 1px 1px #eee, 2px 2px 2px black); | @include box-shadow(1px 1px 1px #eee, 2px 2px 2px black); | ||
| Строка 235: | Строка 235: | ||
| box-shadow: 1px 1px 1px #eee, 2px 2px 2px black; } | box-shadow: 1px 1px 1px #eee, 2px 2px 2px black; } | ||
| </sxh> | </sxh> | ||
| + | ====подключение @content==== | ||
| + | Существует возможность передачи блока стилей в миксин, которые будут расположены среди стилей, подключаемых этим миксином. Эти стили будут размещены вместо директив @content, расположенных внутри миксина. Это даёт возможность создания абстракций, зависящих от конструкций селекторов или директив. Например: | ||
| + | <sxh scss; title: index.scss> | ||
| + | @import "minixs"; | ||
| + | ul{ | ||
| + | @include apply-ly{ | ||
| + | text-decoration: underline; | ||
| + | padding: 5px; | ||
| + | color: blue; | ||
| + | } | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | |||
| + | <sxh scss; title: _minixs.scss> | ||
| + | @mixin apply-ly{ | ||
| + | li{ | ||
| + | font-weight: bold; | ||
| + | @content; | ||
| + | } | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | |||
| + | <sxh css; title: index.css> | ||
| + | ul li { | ||
| + | font-weight: bold; | ||
| + | text-decoration: underline; | ||
| + | padding: 5px; | ||
| + | color: blue; } | ||
| + | </sxh> | ||
web_designe/sass/mixin.1580050158.txt.gz · Последние изменения: 2023/01/12 12:17 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
