Can I abbreviate input types in Sass?

Question

Can I abbreviate input types in Sass?

Navigation

#1 by (3 votes)
#2 by (2 votes)

4

Writing some code using Sass I found this:

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

But I need to cover other types of Input, like this:

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

I need a way to streamline my writing in sass, I would like something like:

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

Is there any way to do something similar using Sass?

css sass scss

asked by Cesar Jr Rodriguez 10.09.2016 в 20:40

source

2 answers

2

Even though you already have an answer, I had made a mixin and I put it in case someone serves a similar case.

It may not be worth it if all the input are going to have the same styles but if there are some different ones or to use with other elements modifying the code slightly:

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

CSS output:

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

answered by 11.09.2016 в 10:50

Give different numerical format with JavaScript Using String

score 3 · Accepted Answer

According to my experience, the closest there is would be to use the & or referrer of top selectors (parents):

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