& use in Sass for specific tag

Question

I want to use the & (which refers to a class) in combination with a tag. Like this example:

.back {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    color: blue;

    &:hover {
        color: red;
   }
}

I want only to use the hover for a-tags. The following is not possible

a&:hover {
     color: red;
}

Does anybody know this?

No, the `&` can't be used that way. The error you get when you try to use it that way says so: "&" may only be used at the beginning of a compound selector. — cimmanon, Jan 10 '13 at 13:16
I've attempted to run the same thing they have in their documentation, but get the same error: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector — Chris, Sep 03 '14 at 20:38

score 0 · Answer 1 · answered Mar 06 '13 at 16:46

If I understand your question correctly, you just don't need the &:

.back {
  ...

  a:hover {
    color: red;
 }

}

In sass, this will compile to .back a:hover { color:red; }. You don't need the &, as this is used to further extend the back class, which I don't think you want to do.

score -1 · Answer 2 · answered Jan 10 '13 at 09:08

-1

.back {
  ...
}

a.back:hover {
  color: red
}

answered Jan 10 '13 at 09:08

zed_0xff

32,417
7
53
72

4

That works of course, but I want to know if there is a solution like the way I described – sneeky Jan 10 '13 at 09:16

& use in Sass for specific tag

2 Answers2

Linked