4

Escribiendo algo de código usando Sass me encontre ésto:

input[type="text"]:focus {
   border: 3px solid #AFDDFB;
   transition: 100ms linear;
}

Pero necesito cubrir otros tipos de Input, de esta manera:

input[type="text"]:focus, input[type="password"]:focus, 
input[type="email"]:focus  {
  border: 3px solid #AFDDFB;
  transition: 100ms linear;
}

Necesito una manera de agilizar mi escritura en sass, quisiera algo como:

input[text, password, email]:focus {
//Dadada
}

Existe alguna manera de hacer algo similar usando Sass?

2 respuestas 2

3

Según mi experiencia lo más cercano que hay sería usar el & o referenciador de selectores superiores (padres):

input {
  &[type=text], &[type=password], &[type=email] {
    &:focus {
      border: 3px solid #AFDDFB;
      transition: 100ms linear;
    }
  }
}
1
  • @blonfu tienes toda la razón, creo que estaba un poco (muy) dormido. Disculpas!
    – Shaz
    el 12 sep. 2016 a las 22:50
2

Aunque ya tienes una respuesta yo había hecho un mixin y lo pongo por si a alguien le sirve para un caso parecido.

Quizá no merezca la pena si todos los input van a tener los mismos estilos pero sí si hay algunos distintos o para usar con otros elementos modificando ligeramente el código:

SASS:

@mixin tipo($args...){
  @each $arg in $args{
    &[type="#{$arg}"]:focus{
      @content;
    }
  }
}

input{
  @include tipo(password, number, text){
    border: solid 1px red;
  }
}

input{
    @include tipo(email, date, search){
    border: solid 1px blue;
  }
}

Salida CSS:

input[type="password"]:focus {
  border: solid 1px red;
}
input[type="number"]:focus {
  border: solid 1px red;
}
input[type="text"]:focus {
  border: solid 1px red;
}

input[type="email"]:focus {
  border: solid 1px blue;
}
input[type="date"]:focus {
  border: solid 1px blue;
}
input[type="search"]:focus {
  border: solid 1px blue;
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.