Инструменты пользователя
web_designe:sass:mixin
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
web_designe:sass:mixin [2020/01/26 17:34] werwolf |
web_designe:sass:mixin [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 118: | Строка 118: | ||
| </sxh> | </sxh> | ||
| + | =====Передача параметров===== | ||
| + | |||
| + | |||
| + | <sxh scss; title: index.scss> | ||
| + | @import "minixs";//Подключение миксинов | ||
| + | |||
| + | .test{//Именованные параметры | ||
| + | @include block(13px , 1px solid red); | ||
| + | width: 500px; | ||
| + | height: 500px; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh scss; title: _minixs.scss> | ||
| + | @mixin rounded($radius){ | ||
| + | border-radius: $radius; | ||
| + | } | ||
| + | |||
| + | @mixin block($radius, $border){ | ||
| + | @include rounded($radius); | ||
| + | border: $border; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh css; title: index.css> | ||
| + | .test { | ||
| + | border-radius: 13px; | ||
| + | border: 1px solid red; | ||
| + | width: 500px; | ||
| + | height: 500px; } | ||
| + | </sxh> | ||
| + | ====Параметры по умолчанию==== | ||
| + | |||
| + | |||
| + | <sxh scss;highlight:4; title: index.scss> | ||
| + | @import "minixs";//Подключение миксинов | ||
| + | |||
| + | .test3{//Параметры по умолчанию | ||
| + | @include block(); | ||
| + | width: 500px; | ||
| + | height: 500px; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh scss;highlight:5; title: _minixs.scss> | ||
| + | @mixin rounded($radius){ | ||
| + | border-radius: $radius; | ||
| + | } | ||
| + | //Параметры по умолчанию | ||
| + | @mixin block($radius: 5px, $border: 1px solid black){ | ||
| + | @include rounded($radius); | ||
| + | border: $border; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh css;highlight:3; title: index.css> | ||
| + | .test3 { | ||
| + | border-radius: 5px; | ||
| + | border: 1px solid black; | ||
| + | width: 500px; | ||
| + | height: 500px; } | ||
| + | </sxh> | ||
| + | ====Именованные параметры==== | ||
| + | |||
| + | |||
| + | <sxh scss;highlight:2; title: index.scss> | ||
| + | .test2{//Именованные параметры | ||
| + | @include block($radius: 20px); | ||
| + | width: 500px; | ||
| + | height: 500px; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh scss;highlight:5; title: _minixs.scss> | ||
| + | @mixin rounded($radius){ | ||
| + | border-radius: $radius; | ||
| + | } | ||
| + | |||
| + | @mixin block($radius: 5px, $border: 1px solid black){ | ||
| + | @include rounded($radius); | ||
| + | border: $border; | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh css; highlight:3-4; title: index.css> | ||
| + | .test2 { | ||
| + | border-radius: 20px; | ||
| + | border: 1px solid black; | ||
| + | width: 500px; | ||
| + | height: 500px; } | ||
| + | </sxh> | ||
| + | ====оператором рест==== | ||
| + | |||
| + | |||
| + | <sxh scss; highlight:2; title: index.scss> | ||
| + | .test4{//Миксин с оператором рест | ||
| + | @include box-shadow(1px 1px 1px #eee, 2px 2px 2px black); | ||
| + | } | ||
| + | </sxh> | ||
| + | |||
| + | |||
| + | <sxh scss;highlight:1; title: _minixs.scss> | ||
| + | @mixin box-shadow($shadows...){//Оператор рест | ||
| + | box-shadow: $shadows; | ||
| + | } | ||
| + | </sxh> | ||
| + | <sxh css; title: index.css> | ||
| + | .test4 { | ||
| + | -webkit-box-shadow: 1px 1px 1px #eee, 2px 2px 2px black; | ||
| + | box-shadow: 1px 1px 1px #eee, 2px 2px 2px black; } | ||
| + | </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.1580049249.txt.gz · Последние изменения: 2023/01/12 12:17 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
