LESS에서 클래스 확장

믹스인의 단점은 코드 중복이 발생한다는 것입니다. 예제를 통해 무엇을 의미하는지 살펴보겠습니다.

다음과 같은 코드가 있다고 가정해 봅시다:

styles.less.mix {
  width: 100px;
  height: 100px;
}
p {
  .mix; 
  color: red;
}

이 코드는 다음과 같이 컴파일되어 중복을 발생시킵니다:

styles.css.mix {
  width: 100px;
  height: 100px;
}
p {
  width: 100px;
  height: 100px;
  color: red;
}

다음과 같이 컴파일되는 것이 더 간결할 것입니다:

styles.css.mix, p {
  width: 100px;
  height: 100px;
}
p {
  color: red;
}

이것은 주어진 클래스를 직접 코드에 삽입하는 대신 확장하는 &:extend 명령어를 사용하여 달성할 수 있습니다. 코드를 수정해 보겠습니다:

styles.less.mix {
  width: 100px;
  height: 100px;
}
p {
  &:extend(.mix); 
  color: red;
}

Задание 1

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

styles.less.mix {
  color: red;
  font-size: 20px;
}
p {
  &:extend(.mix); 
  width: 300px;
}

Задание 2

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

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block p {
  &:extend(.mix); 
  width: 300px;
}

Задание 3

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

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block p, #block div {
  &:extend(.mix); 
  width: 300px;
}

Задание 4

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

styles.less.mix {
  color: red;
  font-size: 20px;
}
#block {
  width: 300px;
  
  p {
    height: 100px;
    &:extend(.mix);
  }
  div {
    height: 200px;
    &:extend(.mix);
  }
}

Задание 5

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

styles.less.mix1 {
  color: red;
}
.mix2 {
  font-size: 20px;
}
div {
  width: 300px;
  &:extend(.mix1);
  &:extend(.mix2);
}