Question

是否有可能将此SCSS代码与参数或类似的东西结合起来？我只是不知道该怎么做。此代码用于在SCSS中设置不同类型的输入字段的样式。我这样做是因为我不想删除不同类型的特定属性（例如type = password - ＆gt;我希望我仍然屏蔽字段中的输入）

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

Answer 1

这似乎是使用占位符的好时机。占位符不直接输出代码，但可以由其他选择器扩展以输出其内容。

<p id="item1" class="text-danger materias" draggable="true" ondragstart="drag(event)">Cambio aceite</p>

SCSS - 将代码与参数组合/缩短/简化？

1 个答案: