ターゲット入力タイプ - SASS

Question

私は、Sassを変換する必要があるCSSファイルを持っています。私は基本的なCSSのスタイルを扱ってきましたが、このコードブロックに固執しました。それは入力タグスタイルを持っています。

.search-box input[type='text']{ 
    font-size: 16px; 
    padding: 3px 5px; 
} 
    .search-box input[type='text']:focus{ 
     outline: 0; 
    } 
    .search-box input[type='text']::-webkit-input-placeholder { 
     color: #000000; 
    } 
    .search-box input[type='text']::-moz-placeholder { /* Firefox 19+ 
     color: #000000; 
    } 
    .search-box input[type='text']:-ms-input-placeholder { 
     color: #000000; 
    } 

だから私はこれを研究し、息子に変換しました。

.search-box { 
    input[type='text'] { 
     font-size: 16px; 
     background-color: #fff; 
     &:focus { 
      outline: 0; 
     } 
     &::-webkit-input-placeholder { 
      color: #000000; 
     } 
     &::-moz-placeholder { 
      color: #000000; 
     } 
     &:-ms-input-placeholder { 
      color: #000000; 
     } 
    } 
} 

私はスタイリングフォーム入力タグのためのベストプラクティスがあることを知っておく必要があり、私はそれはここで間違った方法を変換するのですか？してください

Answer 1

あなたは、このようなオンラインコンパイラを使用することができます右の変換をチェックするためにあなたのコード

@mixin placeholder { 
    &::-webkit-input-placeholder {@content} 
    &::-moz-placeholder {@content} 
    &:-moz-placeholder {@content} 
    &:-ms-input-placeholder {@content} 
} 

.search-box { 
    input[type='text'] { 
     font-size: 16px; 
     background-color: #fff; 
     &:focus { 
      outline: 0; 
     } 
     @include placeholder { 
      color: #000000; 
     } 
    } 
}