2

そこで、SASS を使用して CSS トランジションを使用して、かなりアニメーション化された検索ボックス ( demo ) を作成することにしました。また、 4 つの異なる疑似クラスを含むプレースホルダー テキストをアニメーション化したいと考えました。ソースは次のようになります。

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 に答える