Html 目标输入类型-SASS

我得到了需要转换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;
    }

所以我研究并转化成这样的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;
        }
    }
}

---

我需要知道，有一个表单输入标签样式的最佳实践，我在这里转换它的方式是错误的吗？请对代码稍加改进

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

---

为了检查正确的转换，您可以像这样使用联机编译器，看起来您做得很好。尽管如此，您的sass还是忽略了

填充：3px 5px行！不过，正如@vivekkupadhyay所示，它编译得很好。酷！感谢您指出这一点。我可以提出一个改进建议-为占位符创建一个mixin，这样您就不需要重复代码3times@DenisSheremet有趣！你能给我一个答案吗？我对sass有点陌生。