LESS에서 선택자 결합

컴파일 시 중첩된 구조가 공백이 아닌 연결되어 나오게 해야 할 때가 있습니다. 이를 위해서는 중첩된 선택자 이름 앞에 앰퍼샌드(&)를 붙여야 합니다:

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

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

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

Задание 1

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

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

Задание 2

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

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

Задание 3

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

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

Задание 4

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

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

Задание 5

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

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