使用 Sass 为重点字段设置样式输入占位符

Question

我正在尝试在 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;
} 

Answer 1

// 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;
        }
    }
}

Answer 2

实际上是相反的：

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

编辑

在我的测试中组合它们似乎有问题，但以下应该可行：

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

不过，需要注意的是，这只有在它们被分开时才有效。您不能将多个伪选择器组合到一个定义中（例如 ::-webkit-input-placeholder, :-moz-input-placeholder{ /* this does not work in my testing */ }）。

更新 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;
    }
}

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

Answer 3

来自 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.
}