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

【问题标题】：How to shorten this placeholder-transitioning CSS selector using sass/compass?如何使用 sass/compass 缩短这个占位符转换 CSS 选择器？
【发布时间】：2013-05-20 19:58:37
【问题描述】：

所以我决定使用 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 或指南针来缩短/整理它？

【问题讨论】：

CSS 要求将规则分开。我不认为 Sass 提供了将一组选择器编译成单独的 CSS 规则的方法。此外，这些是伪类或伪元素，而不是“伪选择器”。（这就是 Mozilla 将其从 :-moz-placeholder 更改为 ::-moz-placeholder 的原因——仅仅是因为它作为伪元素更有意义。）

标签： css css-selectors sass compass-sass

【解决方案1】：

你能做的最好的就是将你的占位符抽象为一个 mixin：

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

【讨论】：