According to the Bourbon docs, you can use
#{$all-text-inputs}
to turn this:
#{$all-text-inputs} {
border: 1px solid green;
}
into this:
input[type="email"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="text"], input[type="url"], input[type="color"],
input[type="date"], input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"], input[type="week"] {
border: 1px solid green;
}
Is there a way with Bourbon or Sass to apply :hover
or :focus
to each?
#{$all-text-inputs:hover}
and #{$all-text-inputs}:hover
did not work.
You should be able to just nest the :hover
and :focus
styles using the Sass parent selector:
#{$all-text-inputs} {
border: 1px solid green;
&:hover, &:focus {
// some styles
}
}