css - 如何使用 sass/compass 缩短这个占位符转换 CSS 选择器？

Question

所以我决定使用 SASS 制作一个带有 CSS 过渡的漂亮的动画搜索框 ( demo )。我还想为占位符文本添加动画，其中涉及 four different pesudo-classes ，源代码现在如下所示:

input {
  background-image:url(search.png);
  background-repeat:no-repeat;
  background-size:20px 20px;
  background-position-x:12px;
  background-position-y:10px;
  background-color:#6E597E;
  box-shadow:0 0 5px #333 inset;
  border-radius:15px;
  border:0;
  padding:8px 10px 10px 45px;
  font-size:20px;
  font-weight:300;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#BBB;
  width:100%;
  transition:all 0.5s ease;
  &:focus {
    outline:none;
    box-shadow:0 0 10px #333 inset;
    background-color:#85699A;
    color:#EEE;

    &::-webkit-input-placeholder { color:#DDD; }
    &:-moz-placeholder { color:#DDD; }
    &::-moz-placeholder { color:#DDD; }
    &:-ms-input-placeholder { color:#DDD; }
  }

  &::-webkit-input-placeholder {
     color: #BBB;
     transition:color 0.5s ease;
  }

  &:-moz-placeholder { /* Firefox 18- */
     color: #BBB;  
     transition:color 0.5s ease;
  }

  &::-moz-placeholder {  /* Firefox 19+ */
     color: #BBB;  
     transition:color 0.5s ease;
  }

  &:-ms-input-placeholder {  
     color: #BBB;  
     transition:color 0.5s ease;
  }
}

有什么方法可以使用 SASS 或 compass 来缩短/整理它吗？

Answer 1

您能做的最好的事情就是将占位符抽象为混合:

@mixin placeholder {
  &::-webkit-input-placeholder {
     @content;
  }

  &:-moz-placeholder { /* Firefox 18- */
     @content;
  }

  &::-moz-placeholder {  /* Firefox 19+ */
     @content;
  }

  &:-ms-input-placeholder {  
     @content;
  }
}

input {
  background-image:url(search.png);
  background-repeat:no-repeat;
  background-size:20px 20px;
  background-position-x:12px;
  background-position-y:10px;
  background-color:#6E597E;
  box-shadow:0 0 5px #333 inset;
  border-radius:15px;
  border:0;
  padding:8px 10px 10px 45px;
  font-size:20px;
  font-weight:300;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#BBB;
  width:100%;
  transition:all 0.5s ease;
  &:focus {
    outline:none;
    box-shadow:0 0 10px #333 inset;
    background-color:#85699A;
    color:#EEE;

    @include placeholder { color:#DDD; }
  }

  @include placeholder {  
     color: #BBB;  
     transition:color 0.5s ease;
  }
}