[SCSS] SCSS Placeholder 선택자(%)

SCSS Placeholder 선택자(%)는 스타일 규칙을 정의하되 실제 CSS로 컴파일되지 않는 선택자입니다. Placeholder 선택자는 스타일 규칙을 재사용 가능한 스타일 템플릿으로 정의하고, 필요한 곳에서 @extend 지시자를 통해 사용합니다.

---

기본 개념

SCSS Placeholder 선택자는 % 기호를 사용하여 정의합니다. 이 때, 선택자 이름 앞에 %를 붙여 Placeholder 선택자를 생성하며, 중괄호 내에서 스타일 규칙을 정의합니다. Placeholder 선택자는 컴파일되지 않기 때문에 CSS로 직접 변환되지 않습니다.

// Placeholder 선택자 정의
%button-style {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

// Placeholder 선택자를 사용하여 스타일 적용
.button-primary {
  @extend %button-style;
  background-color: #007bff;
  color: #fff;
}

.button-secondary {
  @extend %button-style;
  background-color: #6c757d;
  color: #fff;
}

위의 예제에서는 %button-style Placeholder 선택자를 정의하고, 이를 .button-primary과 .button-secondary 클래스에 상속하여 스타일을 적용하였습니다. 이 때, 컴파일된 CSS에서는 Placeholder 선택자가 직접 변환되지 않고, 선택자가 상속한 스타일 규칙이 적용됩니다.

---

활용 예제

SCSS Placeholder 선택자(%)는 주로 재사용 가능한 스타일 템플릿을 정의하여 코드의 중복을 줄이는 데에 사용됩니다. 특히, 여러 요소에 동일한 스타일을 적용할 때 유용하게 활용할 수 있습니다.

// Placeholder 선택자 정의
%alert-box {
  padding: 10px;
  border: 1px solid;
}

// Placeholder 선택자를 사용하여 스타일 적용
.warning {
  @extend %alert-box;
  background-color: #ffcc00;
  color: #333;
}

.error {
  @extend %alert-box;
  background-color: #ff0000;
  color: #fff;
}

위의 예제에서는 경고 및 오류 메시지에 공통적으로 사용되는 스타일을 Placeholder 선택자로 정의하고, 이를 다양한 요소에 상속하여 적용하였습니다. 이를 통해 중복된 스타일을 효과적으로 관리할 수 있습니다.

SCSS Placeholder 선택자(%)는 스타일의 재사용성과 유지보수성을 높이는 데에 큰 도움을 주며, 코드의 일관성을 유지하는 데에도 유용하게 활용됩니다.