我正在嘗試爲sass中的佔位符創建一個mixin。Placeholder Mixin SCSS/CSS
這是我創建的mixin。
@mixin placeholder ($css) {
::-webkit-input-placeholder {$css}
:-moz-placeholder {$css}
::-moz-placeholder {$css}
:-ms-input-placeholder {$css}
}
這是我想如何包含混入：
@include placeholder(font-style:italic; color: white; font-weight:100;);
顯然，這是不會，因爲這是正在通過對混入途經的所有冒號和分號的工作，但是...我真的很想只輸入靜態CSS，並通過它完全像上面的函數。
這可能嗎？
您正在尋找的@content指令：
@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;
}
SASS參考有更多的信息，這些信息可以在這裏找到： http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content
由於薩斯3.4，這混入可像這樣書寫嵌套和unnested工作：
@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;
}
}
用法：
.foo {
@include placeholder {
color: green;
}
}
@include placeholder {
color: red;
}
輸出：
.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;
}
爲什麼不這樣呢？
它使用列表，迭代和插值的組合。
@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);
這只是有點複雜，我正在尋找內容指令，但謝謝！ –
我發現通過cimmanon和Kurt Mueller給出幾乎工作的方法，但我需要父參考（即，我需要將「&」前綴添加到每個供應商前綴）;像這樣：
@mixin placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
我使用這樣的混入：
input { @include placeholder {
font-family: $base-font-family;
color: red;
}}
有了父引用，那麼正確的CSS獲取生成，例如：
input::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red; }
沒有父參考（&），那麼空間供應商前綴之前插入和CSS處理器忽略的聲明;看起來像這樣：
input ::-webkit-input-placeholder {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Liberation Serif", Georgia, serif;
color: red; }
非常感謝。爲了使接受的答案/解決方案正常工作，您節省了我數小時的試驗和錯誤... – tmuecksch
值得注意的是，您的選擇器現在稍微超標（除非您真的不希望它在輸入或選擇元素上工作）。添加父級選擇器可以防止在沒有嵌套的情況下使用mixin（這是OP正在查找的內容）。 – cimmanon
'＆'是完全必要的。編輯流行的答案來反映這一點。 – AlexKempton
這是語法速記
=placeholder
&::-webkit-input-placeholder
@content
&:-moz-placeholder
@content
&::-moz-placeholder
@content
&:-ms-input-placeholder
@content
使用它像
input
+placeholder
color: red
我真的認爲這很難閱讀，也不像常規語法 –
我試圖把它作爲註釋，但是太大。我寧願使用這種語法，也不能使所選答案過於簡單。我認爲這可能對別人有用。 – igrossiter
這一個是最好的，易於理解和實施。 – arslion
爲了避免「未關閉的塊：CssSyntaxError」從青菜編譯器所引發的錯誤添加';'到@content的結尾。
@mixin placeholder {
::-webkit-input-placeholder { @content;}
:-moz-placeholder { @content;}
::-moz-placeholder { @content;}
:-ms-input-placeholder { @content;}
}
完美，正是我所需要的。 –
不知道爲什麼這被還原，但答案是不正確的。每個供應商前綴的開頭都需要'@'。看一下Dave Hein進一步的答案，或者更好的辦法 - 試着運行這段代碼，你會發現它不會工作。 – Sk446
@RickM由於您所做的修改無法編譯，因此它已被還原（錯誤：基本級別的規則不能包含父類選擇器引用字符'＆'。）。這將創建OP正在尋找的確切輸出，您聲稱的答案是「正確」的答案不會。 – cimmanon