SASS에서의 셀렉터 결합

때로는 중첩된 구조가 컴파일될 때 공백을 통해 연결되지 않고 하나로 합쳐지기를 원할 때가 있습니다. 이를 위해서는 중첩된 셀렉터 이름 앞에 앰퍼샌드를 붙여야 합니다:

styles.scssdiv {
  &.block {
    width: 300px;
  }
}

결과적으로 컴파일 후에는 다음과 같은 코드가 생성됩니다:

styles.cssdiv.block {
  width: 300px;
}

Задание 1

다음 코드의 컴파일 결과가 어떻게 될지 설명해 보세요:

styles.scss#block {
  &.xxx {
    width: 300px;
  }
}

Задание 2

다음 코드의 컴파일 결과가 어떻게 될지 설명해 보세요:

styles.scss#block {
  .xxx {
    width: 300px;
  }
}

Задание 3

다음 코드의 컴파일 결과가 어떻게 될지 설명해 보세요:

styles.scss#block {
  &.xxx {
    &.zzz {
      width: 300px;
    }
  }
}

Задание 4

다음 코드의 컴파일 결과가 어떻게 될지 설명해 보세요:

styles.scss#block {
  &.xxx {
    .zzz {
      width: 300px;
    }
  }
}

Задание 5

다음 코드의 컴파일 결과가 어떻게 될지 설명해 보세요:

styles.scss#block {
  .xxx {
    &.zzz {
      width: 300px;
    }
  }
}