我正在为 <input>
中的占位符文本设置样式标签,我发现了一些奇怪的行为。
如果我简单地输入以下内容,Chrome 会正确呈现占位符文本:
:focus::-webkit-input-placeholder {
position: absolute;
left: -9000px;
}
但是,如果我尝试在同一行中包含多个浏览器,它根本不会显示:
:focus::-webkit-input-placeholder, :focus:-moz-placeholder, :focus::-moz-placeholder, :focus:-ms-input-placeholder {
position: absolute;
left: -9000px;
}
理想情况下,我希望我的 SASS 看起来像下面这样,但无论出于何种原因,我都不能用逗号分隔不同的选择器。
:focus {
outline: none;
&::-webkit-input-placeholder, &:-moz-placeholder, &::-moz-placeholder, &:-ms-input-placeholder {
// Hide placeholder text on focus
position: absolute;
left: -9000px;
}
}
是否有任何 SASS 语法强制它使用自己的 block 处理每个选择器,如以下示例?
:focus::-webkit-input-placeholder {
position: absolute;
left: -9000px;
}
:focus:-moz-placeholder {
position: absolute;
left: -9000px;
}
// etc.
最佳答案
您可以轻松地创建一个 mixin 并定义所有占位符的样式一次,通过传递给 mixin 本身的内容 block ,如下所示:
@mixin placeholder {
@each $placeholder
in "::-webkit-input-placeholder",
":-moz-placeholder",
"::-moz-placeholder",
":-ms-input-placeholder" {
/* for each placeholder in the above list print the browser vendor
selector, chained with its parent element */
&#{$placeholder} {
/* content is replaced with the actual style, passed as a block
in the mixin inclusion below */
@content;
}
}
}
:focus {
@include placeholder {
color: #ccc;
font-style: italic;
}
}
这将产生以下输出
:focus::-webkit-input-placeholder {
color: #ccc;
font-style: italic;
}
:focus:-moz-placeholder {
color: #ccc;
font-style: italic;
}
:focus::-moz-placeholder {
color: #ccc;
font-style: italic;
}
:focus:-ms-input-placeholder {
color: #ccc;
font-style: italic;
}
您可以在 http://sassmeister.com/ 上测试 sass 代码
关于占位符的 CSS - 强制 SASS 将每个选择器呈现为单独的 CSS block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22471603/