Geek asks and answers

Bourbon / Sass: # {$ all-text-sources} with hover or focus?

According to the Bourbon docs , you can use   #{$all-text-inputs}to include this:

#{$all-text-inputs} {
  border: 1px solid green;
}

in it:

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 :hoveror :focusto each?

#{$all-text-inputs:hover}and #{$all-text-inputs}:hoverdoes not work.

+3
source share
2 answers

You can simply insert styles :hoverand :focususing Sass selector:

#{$all-text-inputs} {
  border: 1px solid green;
  &:hover, &:focus {
    // some styles
  }
}
+10
source

What about #{$all-text-inputs-hover}instead #{$all-text-inputs:hover}?

And for the trick #{$all-text-inputs-focus}

See the spec again http://bourbon.io/docs/#html5-input-types

+4
source

More articles:


All Articles