嵌套的SCSS并定位父对象

Question

I nest SCSS quite a lot and I'm able to target the parent element using & but in this instance it's giving me a headache! I feel like I'm missing something quite obvious but I can't get it to work. Here's my (simplified) SCSS:

[class^="icon--"]:before,
[class*=" icon--"]:before {
    opacity: .50;
}

Basically I'm using an icon font and I want the icons (added using the :before element) to appear lighter than the text it's attached to - fine.

Now I want to overwrite this on certain elements this class is applied to. I've tried to following (below), which does remove the opacity from the targeted element ...but it also seems to cancel out the opacity: .50; on every element. So basically everything has opacity: 1; set.

[class^="icon--"]:before,
[class*=" icon--"]:before {
    opacity: .50;

    @at-root {

        .btn#{&} {
            opacity: 1;
        }
    }
}

Any ideas?

Answer 1

What you want is the following SCSS:

[class^="icon--"],
[class*=" icon--"] {
  &:before {
    opacity: .50;
  }    
  &.btn  {
    &:before {
      opacity: 1;
    }
  }
}

which renders to this CSS:

[class^="icon--"]:before,
[class*=" icon--"]:before {
  opacity: .50;
}
[class^="icon--"].btn:before,
[class*=" icon--"].btn:before {
  opacity: 1;
}

& references the selector that will be built so far in your level of nesting (not necessarily only the parent, only if nesting level is one).

Your attempt would create this CSS:

[class^="icon--"]:before,
[class*=" icon--"]:before {
  opacity: .50;
}
[class^="icon--"]:before.btn,
[class*=" icon--"]:before.btn {
  opacity: 1;
}

Which would expect a class .btn on a pseudo element :before (which you cannot have).

You can easily check on sassmeister.com . Here is a really helpful article on the almighty ampersand in SCSS .

Answer 2

I'm not really familiar with SCSS but it looks like you're trying to target

[class*=" icon--"]:before.btn

A class btn in a pseudo-element, this might be the problem