是否有可能将此 SCSS 代码与参数或类似的东西结合起来?我只是不知道该怎么做。这段代码是关于在 SCSS 中设置不同类型的输入字段的样式。我不得不这样做是因为我不想删除不同类型的特定属性(例如 type=password -> 我希望我仍然屏蔽字段中的输入)
input[type=text]{
width:100%;
border:1px solid $nav-color;
border-radius:4px;
margin: 4px 0;
padding: 5px;
box-sizing:border-box;
transition:.3s;
&:focus{
border-color: $turquoise;
box-shadow: 0 0 4px 0 $turquoise;
}
}
.inputWithIcon{
position:relative;
input[type=text]{
padding-left:40px;
&:focus + i{
color:$turquoise;
}
}
i{
position:absolute;
left:0;
padding: 10px 7px;
color: $nav-color;
transition:.3s;
}
}
input[type=date]{
width:100%;
border:1px solid $nav-color;
border-radius:4px;
margin: 4px 0;
padding: 5px;
box-sizing:border-box;
transition:.3s;
&:focus{
border-color: $turquoise;
box-shadow: 0 0 4px 0 $turquoise;
}
}
.inputWithIcon{
position:relative;
input[type=date]{
padding-left:40px;
&:focus + i{
color:$turquoise;
}
}
i{
position:absolute;
left:0;
padding: 10px 8px;
color: $nav-color;
transition:.3s;
}
}
input[type=password]{
width:100%;
border:1px solid $nav-color;
border-radius:4px;
margin: 4px 0;
padding: 5px;
box-sizing:border-box;
transition:.3s;
&:focus{
border-color: $turquoise;
box-shadow: 0 0 4px 0 $turquoise;
}
}