SCSS - объединение / сокращение / упрощение кода с параметрами?

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

.inputWithIcon находится там дважды

Gerard 07.05.2018 09:37
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
1
36
1

Ответы 1

Похоже, сейчас самое время использовать заполнитель. Заполнители не выводят код напрямую, но могут быть расширены другими селекторами для вывода их содержимого.

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

Другие вопросы по теме