Use ampersand in selector name with SASS

Question

Here's what i have in my CSS file ...

.search-doctors-box {
    position: relative;
    z-index: 999;
    margin: 0px;
}

.search-doctors-box--at-map {
    position: absolute;
    margin-bottom: 10px;
    top: 0px;
    left: 415px;
    width: 680px;
}

I want to achieve this in SASS using the & as the parent selector name and to join it with the rest of the string...

.search-doctors-box {
    position: relative;
    z-index: 999;
    margin: 0px;

    &--at-map {
        position: absolute;
        margin-bottom: 10px;
        top: 0px;
        left: 415px;
        width: 680px;
    }
}

Is it possible?

Thanks!

Answer 1

Unfortunately there are limitations to what you can use in combination with the ampersand in selectors - it expects a class name (.), an id (#), a pseudo class (:), or attribute selectors ([]).
Other acceptable symbols that can also be combined with & are valid CSS selector combinators , >, +, and ~.

---

Solution for Sass >= 3.3:

You can use string interpolation on the ampersand #{&} and then you can concatenate it with any string.
However, this way (if you do this in a nested rule) a nested selector still automatically gets the parent selectors attached at the beginning:

.parent {
  #{&}--at-map { ... }
}

would return:

.parent .parent--at-map { ... }

But, you can save the contents of the ampersand in a variable and use it outside the parent rule. So in your case something along these lines could work:

$last-rule: null;
.search-doctors-box {
  position:relative;
  z-index:999;
  margin: 0px;
  $last-rule: &;
}
#{$last-rule}--at-map {
  position: absolute;
  margin-bottom:10px;
  top: 0px;
  left: 415px;
  width:680px;
}

DEMO

or even better, you could use

@at-root

with nested concatenated selectors, like so:

.search-doctors-box {
  position:relative;
  z-index:999;
  margin: 0px;

  @at-root #{&}--at-map {
    position: absolute;
    margin-bottom:10px;
    top: 0px;
    left: 415px;
    width:680px;
  }
}

which will give you the desired output:

DEMO