SCSS Placeholder 선택자(%)는 스타일 규칙을 정의하되 실제 CSS로 컴파일되지 않는 선택자입니다. Placeholder 선택자는 스타일 규칙을 재사용 가능한 스타일 템플릿으로 정의하고, 필요한 곳에서 @extend 지시자를 통해 사용합니다. 기본 개념 SCSS Placeholder 선택자는 % 기호를 사용하여 정의합니다. 이 때, 선택자 이름 앞에 %를 붙여 Placeholder 선택자를 생성하며, 중괄호 내에서 스타일 규칙을 정의합니다. Placeholder 선택자는 컴파일되지 않기 때문에 CSS로 직접 변환되지 않습니다. // Placeholder 선택자 정의 %button-style { padding: 10px 20px; font-size: 16px; border: none; curs..

SCSS 상속은 스타일 규칙을 다른 스타일 규칙에 적용하는 기능을 제공합니다. 이를 통해 중복되는 스타일 코드를 줄이고 코드의 재사용성을 높일 수 있습니다. 기본 개념 SCSS의 상속은 @extend 지시자를 사용하여 수행됩니다. 기존에 정의한 스타일을 다른 스타일에 상속하고자 할 때 @extend를 사용하며, 선택자를 통해 어떤 스타일을 상속할지 지정합니다. // 기존 스타일 정의 .button { padding: 10px 20px; background-color: #007bff; color: #fff; } // .button 스타일을 상속하는 .primary-button 정의 .primary-button { @extend .button; border: 2px solid #007bff; } 위의 예제에..