scss中&代表什么

Question

最近在学习scss，于是看了elment-ui的源码，其中有几处不是很理解，直接上代码吧

@function selectorToString($selector) { 
  @debug '这个是' + $selector;
  $selector: inspect($selector); //cast to string
  @debug '这个是2' + inspect($selector);
  @debug '这个是2' + inspect('.block');
  $selector: str-slice($selector, 2, -2); //remove brackets 
  @debug '这个是3' + $selector;
  @return $selector; 
}

@mixin b($block) { 
  .#{$block} { 
    @content; 
  } 
}

@mixin e($element) { 
  $selector: &; 
  @debug '&是' + &;
  @if selectorToString($selector) {
    @content;
  }
}

@include b(block) { 
  background: red; 
  @include e(kindlebook) {
    background: gray;
  }
}
// $selector: selectorToString(block);
@error 1；

上面代码，打印如下：

我想问的问题是：
为什么在函数selectorToString中，第一次打印的是.block，而第二次打印的就带上了括号呢？并且还加上了逗号，这也是我再看源码的时候对那句注释//remove brackets百思不得其解的原因。
或者更进一步的说，& 在scss中获取到底是什么样的存在。

Answer 1

&代表元素自身，这里的&就是.block

.block {
  color: &;
  color: inspect(&);
}

---

编译结果为:

.block {
  color: .block;
  color: (.block,);
}