& 있을 때

.data-layer__wrapper {
  body.desktop.screen--sm & { // & 제거
    margin-left: 16px;
    margin-right: 16px;
  }
}

// 컴파일 결과
body.desktop.screen--sm, .data-layer__wrapper {
  margin-left: 16px;
  margin-right: 16px;
}

& 없을 때

.data-layer__wrapper {
  body.desktop.screen--sm { // & 제거
    margin-left: 16px;
    margin-right: 16px;
  }
}

// 컴파일 결과
.data-layer__wrapper body.desktop.screen--sm {
  margin-left: 16px;
  margin-right: 16px;
}

차이점

• & 있을 때 : 부모 선택자를 참조하여 뒤에 붙음
• & 없을 때 : 단순히 중첩된 선택자로 처리되어 자식 선택자가 됨