cbuchert cbuchert - 14 days ago 5
Sass (Sass) Question

Combining Nested Selections with SASS

In CSS, I can make selections like this:

input[type="number"],
input[type="password"],
input[type="text"],
textarea,
.button {
border-radius: 3px;
}


How do I nest my attribute selectors in SASS to achieve this output? The following SASS is causing my linter to scream (sass-lint, "Please check validity of the block").

input {
&[type="number"] {}
&[type="password"] {}
&[type="text"] {}
},
textarea,
.button-base {
border-radius: 3px;
}

Answer

I see what you are getting at, but it might be futile. I do not think that kind of compilation is going to happen. This might be the closest you get:

textarea,
.button-base {
  border-radius: 3px;
}
input {
  &[type="number"],
  &[type="password"],
  &[type="text"] {
      @extend .button-base;
  }
}
Comments