Можно ли как-то объединить этот код 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;
}
}






Похоже, сейчас самое время использовать заполнитель. Заполнители не выводят код напрямую, но могут быть расширены другими селекторами для вывода их содержимого.
$nav-color: #333;
$turquoise: #48d1cc;
// Input placeholder
%input {
width: 100%;
border: 1px solid $nav-color;
border-radius: 4px;
margin: 4px 0;
padding: 5px;
box-sizing: border-box;
transition: color .3s;
&:focus {
border-color: $turquoise;
box-shadow: 0 0 4px 0 $turquoise;
}
}
input[type=text],
input[type=date],
input[type=password] {
@extend %input;
}
.inputWithIcon {
position: relative;
input {
padding-left: 40px;
&:focus + i {
color: $turquoise;
}
}
i {
position: absolute;
left: 0;
padding: 10px 7px;
color: $nav-color;
transition: color .3s;
}
}
.inputWithIcon находится там дважды