目標輸入類型 - SASS

我得到了需要轉換sass的css文件。我已經處理了基本的CSS樣式，但堅持使用這個代碼塊。它有一個輸入標籤樣式。目標輸入類型 - SASS

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

所以我研究並轉換成這樣的sass。

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

我需要知道的是有一個樣式表單輸入標籤的最佳做法我是否在這裏轉換錯誤的方式嗎？請

來源

2016-10-04 Janath

爲了檢查正確的轉換，您可以使用這樣的在線編譯器[**官方編者（sassmeister）**（http://www.sassmeister.com） – vivekkupadhyay

看起來你做得很好。雖然，你的sass忽略了'padding：3px 5px;'line！不過，它編譯得很好，正如@vivekkupadhyay所示。 –

酷！感謝您指出了這一點。 – Janath

小改進代碼

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

來源

2016-10-04 11:54:03

目標輸入類型 - SASS

回答

相關問題