如何通过参数合并简化SCSS输入框样式代码？

嘿，这个问题我太有共鸣了！之前维护表单样式的时候也被分散的input代码搞得头大，完全可以通过SCSS的特性来合并简化，而且绝对不会影响input的原生功能——毕竟像密码掩码这类特性是浏览器基于type属性实现的，咱们只是改样式，根本碰不到type本身，所以放心大胆合并就行。

下面给你几种实用的方案，按需选择：

1. 最简单：属性选择器分组 #

如果你的不同类型input通用样式完全一致，直接把多个type选择器写在一起就行，这是最直接的方式：

input[type=text],
input[type=password],
input[type=email],
input[type=tel] {
  width: 100%;
  border: 1px solid $nav-color;
  border-radius: 4px;
  margin: 4px 0;
  padding: 5px;
  box-sizing: border-box;
  // 其他通用样式都放这里
}

这种方式输出的CSS和你分散写的几乎一样，但维护起来只需要改这一块就行，而且每个input依然保持原生行为：password还是会显示圆点掩码，email还是会有浏览器自带的格式验证提示。

2. 最灵活：SCSS Mixin #

如果有些input类型需要额外的专属样式（比如给tel输入框加个电话图标位置，给email加个验证失败的边框色），用Mixin就非常方便：

// 先定义通用样式的Mixin
@mixin input-base {
  width: 100%;
  border: 1px solid $nav-color;
  border-radius: 4px;
  margin: 4px 0;
  padding: 5px;
  box-sizing: border-box;
}

// 调用Mixin，按需添加专属样式
input[type=text] {
  @include input-base;
  // text类型的特殊样式（如果需要）
}

input[type=password] {
  @include input-base;
  // 这里不用加任何额外样式，原生掩码功能完全保留
}

input[type=email] {
  @include input-base;
  // 比如添加email验证失败的样式
  &:invalid {
    border-color: #ff4444;
  }
}

以后要修改通用样式，只需要改@mixin input-base里的内容，所有调用它的input都会自动更新，非常省心。

3. 最简洁：SCSS占位符（%placeholder） #

如果你追求输出CSS的简洁性，可以用占位符选择器，它只会在被@extend调用的时候生成代码，不会单独输出：

// 定义通用样式的占位符
%input-common {
  width: 100%;
  border: 1px solid $nav-color;
  border-radius: 4px;
  margin: 4px 0;
  padding: 5px;
  box-sizing: border-box;
}

// 批量调用占位符
input[type=text],
input[type=password],
input[type=number] {
  @extend %input-common;
}

// 单独给某个类型加样式
input[type=tel] {
  @extend %input-common;
  padding-right: 30px; // 给电话输入框预留图标位置
}

输出的CSS会把所有@extend的选择器合并在一起，和第一种属性分组的结果一样，但占位符的方式更适合通用样式固定、不需要频繁修改参数的场景。

关键提醒 #

不管用哪种方法，都不要修改input的type属性，也不要覆盖浏览器原生的功能样式（比如不要给password设置-webkit-text-security: none这类属性），这样就能100%保留所有原生特性，比如密码掩码、number的上下箭头、email的格式验证等等。

内容的提问来源于stack exchange，提问作者Miggi