How can I target the syntactical parent when using the ampersand?

Question

I'm trying to remove some duplication in my scss selector.

.container {
  .operation {
    color: green;
  }
  .row.is-active &,
  .row:hover & {
    .operation {
      color: inherit;
    }
  }
}

I tried rewriting it like this:

.container {
  .operation {
    color: green;
  }
  .row & {
    &.is-active, &:hover {
      .operation {
        color: inherit;
      }
    }
  }
}

However, this causes .is-active to be applied to .container instead of .row

How can I target the syntactical parent when using the ampersand ?

@Mr_Green the expected output is the result of the first sass example ( which is a valid example ) — Willem D'Haeseleer, Oct 26 '16 at 03:20
@WillemD'Haeseleer Now that I understand your question, I have modified my answer below, hopefully it is of some help :) — shaune, Nov 08 '16 at 10:18

shaune · Answer 1 · 2016-11-08T10:36:08.163

0

I took some time to answer the question again, as I mis-understood it initially. Unfortunately there is absolutely no way possible to do this in SASS at the moment. Even when trying to make use of the more advanced SASS functions to manipulate selectors and strings it is not possible.

There is some Good News

It is possible to do using Stylus. I have created a live Example on codepen.

  // Stylus - not SASS
  .container {
    .operation {
      color: green;
    }
    .row {
      ^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
        .operation {
          color: inherit;
        }
      }
    }
  }

I hope this helps you in some way, at the very least it might provide you with an option, but unfortunately SASS cannot achieve what you are attempting.

edited Nov 08 '16 at 10:36

answered Oct 23 '16 at 07:45

shaune

1,020
8
12

Sorry I'm not sure what you mean. My first scss example is valid scss and as such the compiled output from that is the expected output. I'm just trying to write it without having to duplicate the .row selector – Willem D'Haeseleer Oct 23 '16 at 08:48
Ok, so i've re-looked over my result and the result from your first example, and they are different. I was after the CSS output to be able to confirm and test against it to be certain that it I can duplicate the result. My result is different from the CSS output. without any further information I really can't help, sorry. – shaune Oct 23 '16 at 10:20
Thanks , I appreciate the effort, however in stylus the proposed solution is more complex then the original solution, which kind off defies the purpose. – Willem D'Haeseleer Nov 08 '16 at 16:30

How can I target the syntactical parent when using the ampersand?

1 Answers1