3

I know I can do all sorts of wonderful things with & in Sass like

.date {

  & input[readonly] {
    cursor: default;
  }
}

But, I've got input[readonly] being set by Foundation 6 to input[readonly] and this won't override it without !important being added. Seems like this should be solvable without !important, but you can't do this:

.date {

  &input[readonly] {
    cursor: default;
  }
}

Since you'll just get .dateinput[readonly]{ ... }. Is there a way around this so I can get input[readonly].date? The example below won't do that as & has to be used at the start of compound selectors:

.date {

  input[readonly]& {
    cursor: default;
  }
}
mtpultz
  • 17,267
  • 22
  • 122
  • 201

1 Answers1

4

You can do:

.date {

  input[readonly] & {
    cursor: default;
  }
}

(note the space)

Although this will also add an space between the parent and the child, which is not what you want. You might need to use @at-root alongside this, as explained here.

Community
  • 1
  • 1
Forty
  • 305
  • 3
  • 15
  • The @at-root directive is the answer. That's awesome! I spent a lot of time trying to find something like this. I knew it had to be out there go Sass!!! – mtpultz Jul 18 '16 at 19:08