目标输入类型 - 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

回答

相关问题