[Sass 특징] Parent Selector (부모 선택자, &)

2020.03.19 - [Frontend/Sass (SCSS)] - [Sass 특징] Nesting (중첩)

 

Sass 문법을 사용하면서 가장 기본적으로 사용하는 속성이 nesting(중첩)이다.

그리고 nesting을 사용하면서 필수로 알아야할 것이 바로 Parent Selector(부모 선택자) 이다.

 

1. 부모 선택자(&)의 사용

- 부모 선택자는 특수문자 '&'을 사용한다.

- 기본적으로 중첩된 Sass 문법 안에서 사용한다.

- :hover, :checked, :not(&) 등의 가상클래스에 사용된다.

- :after, :before 등의 가상요소에 사용된다.

- 언더바(_), 하이픈(-) 등의 클래스명의 접속사에 사용한다.

 

등의 특징이 있다.

 

자세한 사항은 예시로 보면 이해가 쉽다.

 

/* SCSS */
.wrap{
  div{
    &:first-child{border: 1px solid #333;}
  }

  .box1{
    &:hover{
      text-decoration: underline;
      color: #fff000;
    }
    
    // .box1_inner
    &_inner{
      position: relative;
    }
  }
  
  :not(&){display: none;}
}


/* CSS */
.wrap div:first-child{border:1px solid #333;}
.wrap .box1:hover{text-decoration:underline; color:#fff000;}
.wrap .box1_inner{position:relative;}
not(.wrap){display:none;}

위 예시와 같이

.wrap div중 first-child에 특정 css를 적용하기 위해

.wrap div의 중첩 범위에 &을 사용하여 &:first-child를 적용 하였고

 

.wrap .box1:hover를 적용하기 위해 마찬가지로 &을 사용하여 적용하였다.

 

그리고 .box1뒤에 하이픈을 접속사로 사용하여 클래스명을 작성할때도 &을 사용하였다.

(.box1_inner)

 

not에 &를 넣어 &에 해당하는 영역에 css로 컴파일될 때

부모 요소인 .wrap을 넣어주는 방법도 위와같이 사용된다.

 

2. 부모선택자(&) 응용

위에서 설명한 가상선택자 및 하이픈(-), 언더바(_) 등의 클래스 등 기본적인 사용 방법 외에도

부모 선택자를 응용하여 사용할 수 있다. 

/* SCSS */
.wrap{
  .box{
    .outer_wrapper &{
      margin:0 auto; 
      width:1024px;
    }
  }
}


/* CSS */
.outer_wrapper .wrap .box{margin:0 auto; width:1024px;}

위 예시를 보면 분명 .wrap과 .box의 범위 안에

.outer_wrapper를 사용해서 값을 줬지만

막상 컴파일된 값은 .outer_wrapper이 가장 부모요소로 위치하게 된다.

 

그 이유는 바로 앞서 설명했듯 부모선택자(&)의 사용 때문이다.

.outer_wrapper 뒤에 부모선택자(&)를 사용하면 

부모에 있는 요소들이 해당 '&' 문자에 적용된다.

 

그렇기 때문에 .outer_wrapper이 가장 먼저 위치하게 되고

그 뒤에 .wrap과 .box가 차례대로 컴파일된다.

 

3. 부모선택자(&) 사용시 주의사항

위 2번에 설명한 내용을 염두하고 아래와 같은 소스를 작성하면

생각했던 css 내용으로 컴파일이 되지 않을 것이다.

/* SCSS */
.box{
  div&{
    background:skyblue;
  }
}

위와 같이 소스를 작성하면

내가 원하는 css 컴파일 내용은

div.box{background:skyblue;} 일 것이다.

 

하지만 컴파일 자체가 안되고 에러가 뜬다.

이유는 부모선택자(&)의 사용은 요소의 시작 부분에서만 사용할 수 있기 때문이다.

 

예를 들어 span&와 같이 특정 엘리먼트 뒤에 붙여서 사용이 불가능하고

span &처럼 & 앞에 특정 엘리먼트가 바로 붙어서 사용할 수 없다.