[SASS] & 의 사용법

&의 역할

&는 부모 선택자를 참조하는 특수한 키워드
&를 사용하면 현재 규칙의 부모 선택자를 참조

&:last-child

.parent {
  color: blue;

  &:last-child {
    color: red;
  }
}

&:last-child
는 부모 요소의 마지막 자식 요소를 선택하는 CSS 의사 클래스입니다.

&:last-child 는 .parent:last-child 로 해석

---

&:last-child의 역할

.background {
  display: flex; 
  justify-content: space-between; 
  width: 100%; 
  height: 100vh; 
  position: absolute; 
  padding: 0 1rem; 
  span {
    display: block; 
    height: 100%;
    background: linear-gradient(
      180deg,
      #17ff2f 0%,
      rgba(217, 217, 217, 0) 100%,
      rgba(217, 217, 217, 0) 100%
    );
    width: calc(100% / 9 - 2.7vw);
    margin-right: 2.7vw;

    &:last-child {
      margin-right: 0;
    }
  }

&는 span 태그를 의미.