[Sass 특징] placeholder 선택자 (%), @extend

Sass 문법에서 placeholder 선택자는 일반적인 클래스와 같이 쓰이지만

일반적인 클래스와 다르게 단독으로 사용하면 css에 컴파일이 되지 않고

%(퍼센트) 문자와 함께 사용이 된다.

 

1. placeholder 선택자 특징

- % 문자와 함께 사용

- 단독으로 사용하면 css로 컴파일되지 않는다.

- 함수나 변수를 사용하듯 내가 원하는 요소에 불러와서 사용할 수 있다.

- 만들어 놓은 placeholder 선택자는 @extend를 통해 호출한다.

 

 

앞서 설명했 듯 placeholder 선택자는 사용 자체는 일반적인 클래스나 아이디와 같은 선택자를 사용하듯 사용한다.

그리고 (% + 선택자명) 으로 사용한다.

/* SCSS */
.box, %box-style{
  border:1px solid #333;
  background:#fff;
}


/* CSS */
.box{
  border:1px solid #333;
  background:#fff;
}

위의 예시를 보면 .box와 %box-style에 border, background css를 적용했지만

컴파일 된 내용을 본다면 .box에만 css가 적용된 것을 볼 수 있다.

 

일종의 변수나 함수의 개념으로 보면 된다.

 

%box-style에 스타일을 적용해놓고 그것을 호출할때만 사용을 할 수 있다.

호출할 때는 @extend를 통해 호출한다.

/* SCSS */
.box, %box-style{
  border:1px solid #333;
  background:#fff;
}

.box2{
  @extend %box-style;
}


/* CSS */
.box, .box2{
  border:1px solid #333;
  background:#fff;
}

 

2. placeholder 선택자 응용

위의 특징을 바탕으로 반복되는 공통된 css 스타일을 %placeholder 선택자로 만들어 놓고

원하는 곳에 손쉽게 사용할 수 있다.

/* SCSS */
%common-btn{
  border:1px solid #333;
  padding:5px 10px;
  
  &:hover{
    border-color:red;
  }
}

.button1{
  @extend %common-btn;
  color:#555;
}

.button2{
  @extend %common-btn;
  color:#999;
}


/* CSS */
.button1, button2{
  border:1px solid #333;
  padding:5px 10px;
}

.button1:hover, button2:hover{
  border-color:red;
}

.button1{
  color:#555;
}

.button2{
  color:#999;
}

위 예시와 같이 .button1과 .button2에 반복되는 스타일인 border, padding, hover을 %common-btn으로 만들고

각 .button1, .button2에 @extend로 호출해주면 반복되는 내용을 여러번 입력하지 않아도 되고

공통되는 스타일이 수정이 된다고하면 유지보수하기도 원활할 것이다.