Use ampersand in selector name with SASS

Question

Here is 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 name of the parent selector and how to attach it to 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

, , - (.), id (#), (:) ([]).
, &, CSS , >, + ~.

---

Sass >= 3.3:

#{&}, .
, ( ), , :

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

:

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

. - :

$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

,

@at-root

, :

.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;
  }
}

:

DEMO