2

所以我决定使用 SASS 制作一个带有 CSS 转换的漂亮的动画搜索框(演示)。我还想为占位符文本设置动画,其中涉及四个不同的 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 或指南针来缩短/整理它?

4

1 回答 1

5

你能做的最好的就是将你的占位符抽象为一个 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;
  }
}
于 2013-05-25T11:54:09.710 回答