为焦点字段设置带有Sass的输入占位符样式

我试图在Sass 3.3.1中为输入字段（不同浏览器）设置占位符样式，并希望在字段聚焦时更改不透明度。我很难将伪类和伪元素与符号结合起来。下面给出了一个编译错误：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder{

    ... some default styling

    :focus#{&}{
        opacity: 0;
    }
}

这能做到吗

编辑 这是我正在寻找的输出：

::-webkit-input-placeholder {
    opacity: 1;
}
:-moz-placeholder{
    opacity: 1;
}
::-moz-placeholder{
    opacity: 1;
}
:-ms-input-placeholder{
    opacity: 1;
}
:focus::-webkit-input-placeholder {
    opacity: 0;
}
:focus:-moz-placeholder{
    opacity: 0;
}
:focus::-moz-placeholder{
    opacity: 0;
}
:focus:-ms-input-placeholder{
    opacity: 0;
} 

---

实际上，这将是另一种方式：

element:focus{
    &::-webkit-input-placeholder,
    &:-moz-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder{
        opacity: 0;
    }
}

编辑 在我的测试中，我似乎很难将它们结合起来，但以下几点应该是可行的：

::-webkit-input-placeholder{
   color: red;
   &:focus{
        color: blue;
   }
}

但需要注意的是，只有当它们分开时，这才有效。不能将多个伪选择器组合到一个定义中（如

：-webkit输入占位符，：-moz输入占位符{/*这在我的测试中不起作用*/}

）

更新2 下面是我模拟的一个快速SASS函数，它将简化流程：

@mixin input-placeholder($all:default){
    @if $all == default {
        $all : ("::-webkit-input-placeholder", ":-moz-placeholder","::-moz-placeholder",":-ms-input-placeholder");
    }
    @each $placeholder in $all {
        #{unquote($placeholder)}{
            @content;
        }
    }
}

您可以通过执行以下操作来使用它：

@include input-placeholder{
    color: red;
    &:focus {
       color: blue;
    }
}

---

这意味着您只需编写一次代码。它将在各行上输出所有数据，并对其应用相同的规则。

来自SASS Compass的解决方案：

// Style the html5 input placeholder in browsers that support it.
//
// The styles for the input placeholder are passed as mixin content
// and the selector comes from the mixin's context.
//
// For example:
//
//     #{elements-of-type(text-input)} {
//       @include input-placeholder {
//         color: #bfbfbf;
//         font-style: italic;
//       }
//     }
//
// if you want to apply the placeholder styles to all elements supporting
// the `input-placeholder` pseudo class (beware of performance impacts):
//
//     * {
//       @include input-placeholder {
//         color: #bfbfbf;
//         font-style: italic;
//       }
//     }
@mixin input-placeholder {
  @include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
    @if $current-prefix == -webkit {
      &::-webkit-input-placeholder { @content; }
    }
    @elseif $current-prefix == -moz {
      // for Firefox 19 and below
      @if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
        &:-moz-placeholder { @content; }
      }
      // for Firefox 20 and above
      &::-moz-placeholder { @content; }
    }
    @elseif $current-prefix == -ms {
      &:-ms-input-placeholder { @content; }
    }
  }
  // This is not standardized yet so no official selector is generated.
}

---

当字段没有焦点时，我也有一些默认的占位符样式。二者可以结合吗？对不起，如果我不清楚，我更新了原来的问题。@WillemVanBockstal我已经修改了答案，你可以这样做，但这不是很有趣。您需要将每个伪类分开，否则Safari（在我的例子中）就会这样做；t应用它们。@WillemVanBocstal我已经测试了上面的SASS函数，在我的测试中，它输出的代码可以在safari 8m中工作，并且应该也可以在所有其他浏览器上工作。我认为在您的第一次编辑中，顺序仍然是错误的，因为我需要按照以下特定顺序编译到：focus:：-webkit输入占位符。但是谢谢，你在更新2中说得对，我需要分离每个伪类，所以我要试试这个函数@在这种情况下，元素的顺序并不重要，因为唯一的要求是两者都是真的。因此，如果已聚焦并选中，则将颜色设置为蓝色，否则将颜色设置为红色。实际上，您不需要为任何要应用的元素提供伪元素，因此第二个元素可以工作并输出代码，以实现我所看到的目标：）也请注意，此选择器可能重复：@cimmanon谢谢您的帮助，我不知道第二个链接。但我仍然在寻找一种简单的方法来为每个供应商生成：focus规则。

：focus

，就Sass而言，它与任何其他选择器都是一样的。你的答案在第一个链接中。同样相关：我不知道第一个链接将如何引导我找到输出<代码>：焦点：：-webkit输入占位符。我不能使用

：focus&

，因为在&之前必须有一个空格。你的最后一个链接似乎更符合我的要求。再次感谢你的帮助。

// Cross-browsers opacity: @include opacity(0.5);
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

// Transitions for all: @include transition($transition);
$transition: all .3s ease;
@mixin transition($value) {
    -webkit-transition: $value;
    -moz-transition: $value;
    -ms-transition: $value;
    -o-transition: $value;
    transition: $value;
}

// Input placeholder animation: @include placeholder { color: #000 }
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
}

// How to use:
input {
    text-overflow: ellipsis;
    color: mediumseagreen;
    @include placeholder {
        color: cornflowerblue;
        transition: $transition;
        @include opacity(1);
    }
    &:focus {
        @include placeholder {
            @include opacity(0);
            transition: $transition;
        }
    }
}