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 speed up my writing in sass, I would like something like:
input[text, password, email]:focus {
//Dadada
}
Is there a way to do something similar using Sass?
In my experience the closest thing there is would be to use the
&
or referrer of top (parent) selectors:Although you already have an answer, I had made a mixin and I put it in case someone finds it useful for a similar case.
It may not be worth it if they are all
input
going to have the same styles, but it is worth it if there are some different ones or to use with other elements by slightly modifying the code:SASS:
CSS output: