Placeholder Mixin SCSS / CSS
Próbuję stworzyć mixin dla elementów zastępczych w sass.
To jest mixin, który stworzyłem.@mixin placeholder ($css) {
::-webkit-input-placeholder {$css}
:-moz-placeholder {$css}
::-moz-placeholder {$css}
:-ms-input-placeholder {$css}
}
Tak chciałbym załączyć mixin:
@include placeholder(font-style:italic; color: white; font-weight:100;);
Oczywiście to nie zadziała z powodu wszystkich dwukropków i półokropków, które są przekazywane do mixin, ale... Naprawdę chciałbym po prostu wprowadzić statyczny css i przekazać go dokładnie tak, jak powyższa funkcja.
Czy to możliwe? 6 answers
Szukasz @content
dyrektywy:
@mixin placeholder {
::-webkit-input-placeholder {@content}
:-moz-placeholder {@content}
::-moz-placeholder {@content}
:-ms-input-placeholder {@content}
}
@include placeholder {
font-style:italic;
color: white;
font-weight:100;
}
Więcej informacji o Sass Reference można znaleźć tutaj:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
W Sass 3.4 mixin może być napisany w taki sposób, aby działał zarówno zagnieżdżony, jak i niezestawiony:
@mixin optional-at-root($sel) {
@at-root #{if(not &, $sel, selector-append(&, $sel))} {
@content;
}
}
@mixin placeholder {
@include optional-at-root('::-webkit-input-placeholder') {
@content;
}
@include optional-at-root(':-moz-placeholder') {
@content;
}
@include optional-at-root('::-moz-placeholder') {
@content;
}
@include optional-at-root(':-ms-input-placeholder') {
@content;
}
}
Użycie:
.foo {
@include placeholder {
color: green;
}
}
@include placeholder {
color: red;
}
Wyjście:
.foo::-webkit-input-placeholder {
color: green;
}
.foo:-moz-placeholder {
color: green;
}
.foo::-moz-placeholder {
color: green;
}
.foo:-ms-input-placeholder {
color: green;
}
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-24 15:24:46
Znalazłem podejście podane przez cimmanon i Kurt Mueller prawie zadziałało, ale potrzebowałem referencji rodzica( tj. muszę dodać prefiks ' & ' do każdego prefiksu dostawcy); tak:
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
Używam mixin tak:
input { @include placeholder {
font-family: $base-font-family;
color: red;
}}
Z referencją nadrzędną w miejscu, następnie generowany jest poprawny css, np.:
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red; }
Bez referencji nadrzędnej ( & ), wtedy przed prefiksem vendor wstawiana jest spacja, a procesor CSS ignoruje deklarację; że wygląda tak:
input ::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:33
To dla skrótowej składni
=placeholder
&::-webkit-input-placeholder
@content
&:-moz-placeholder
@content
&::-moz-placeholder
@content
&:-ms-input-placeholder
@content
Użyj go jak
input
+placeholder
color: red
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-23 18:21:15
Dlaczego nie coś takiego?
Używa kombinacji list, iteracji i interpolacji.
@mixin placeholder ($rules) {
@each $rule in $rules {
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
#{nth($rule, 1)}: #{nth($rule, 2)};
}
}
}
$rules: (('border', '1px solid red'),
('color', 'green'));
@include placeholder( $rules );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-19 02:28:07
Aby uniknąć błędów' Unclosed block: CssSyntaxError 'wyrzucanych z kompilatorów sass, dodaj'; ' na końcu @content.
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-09 10:35:25
Używam dokładnie tego samego elementu zastępczego sass mixin, co napisał NoDirection. Znalazłem go w kolekcji sass mixins tutaj i jestem z niego bardzo zadowolony. Jest tekst , który bardziej wyjaśnia opcję mixins.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-23 14:40:05