부모요소 선택자 참조 키워드 &

• SCSS 에서는 &(Ampersand) 키워드를 사용하여 부모요소 선택자를 간편하게 참조할 수 있음

예시

index.html

<div class="btn-outer">
    <a href="#none" class="btn">study SCSS</a>
</div>

style.scss

.btn-outer {
  width: 300px;
  .btn {
    display: block;
    text-transform: uppercase;
    color: yellowgreen;
    text-align: center;
    transition: 0.5s;
    width: 300px;
    height: 50px;
    &::before,
    &::after {
      content: '';
      width: inherit;
      height: inherit;
    }
    &:hover {
      background-color: crimson;
    }
  }
}

• 위 코드에서 ::before과 ::after 에게 .btn 은 부모 요소
  • 즉, .btn 중괄호 내에서 &을 사용하면 부모 요소인 .btn 이라는 선택자 이름을 그대로 받아옴
• 따라서 위 코드를 .css 파일로 컴파일 하면 다음과 같음

style.css

.btn-outer {
  width: 300px;
}
.btn-outer .btn {
  display: block;
  text-transform: uppercase;
  color: yellowgreen;
  text-align: center;
  transition: 0.5s;
  width: 300px;
  height: 50px;
}
.btn-outer .btn::before, .btn-outer .btn::after {
  content: "";
  width: inherit;
  height: inherit;
}
.btn-outer .btn:hover {
  background-color: crimson;
}

응용 - 변수로 사용하기

• &(Ampersand) 키워드를 변수처럼 사용할 수도 있다.
• 폰트 사이즈, 색상 등 웹페이지에 자주 사용되는 클래스 네임을 미리 세팅하는 용도로 사용하면 효율적이다.

예시

index.html

<section>
  <h1 class="font-large">This is H1 headline</h1>
  <h2 class="font-medium">This is H2 headline</h2>
  <h3 class="font-small">This is H3 headline</h3>
</section>

style.scss

.font {
  &-large {
	font-size: 60px;
	color: crimson;
	text-transform: uppercase;
	}
  &-medium {
	font-size: 40px;
	color: yellowgreen;
	}
  &-small {
	font-size: 20px;
	color: royalblue;
  }
}

• 위 코드에서는 &가 .font 와 동일하므로 .css로 컴파일하면 아래와 같다.

style.css

.font-large {
  font-size: 60px;
  color: crimson;
  text-transform: uppercase;
}
.font-medium {
  font-size: 40px;
  color: yellowgreen;
}
.font-small {
  font-size: 20px;
  color: royalblue;
}

중복 선택자(Duplicate Siblings Selector)

• 태그와 함께 선택자를 중복시키거나 클래스를 중복시키는 경우
• &와 선택자를 합쳐서 사용하면 클래스를 사용한 경우 선택자A.선택자B 의 형태, 아이디를 사용한 경우 선택자A#선택자B의 형태로 CSS 컴파일 됨

예시

index.html

<div class="frame">
	<button class="btn confirm">confirm button</button>
	<button class="btn warning">warning button</button>
</div>

style.scss

.frame {
	margin: 15px;
	.btn {
		padding: 10px;
		text-align: center;
		width: 100px;
		&.confirm {
			background-color: yellowgreen;
		}
		&.warning {
			background-color: crimson;
		}
	}
}

style.css

.frame {
  margin: 15px;
}
.frame .btn {
  padding: 10px;
  text-align: center;
  width: 100px;
}
.frame .btn.confirm {
  background-color: yellowgreen;
}
.frame .btn.warning {
  background-color: crimson;
}

& 다음에 띄어쓰기가 있고 선택자가 오는 경우 중복선택자가 아니라 자식선택자가 되므로 주의할 것 !

style.scss

.frame {
	margin: 15px;
	.btn {
		padding: 10px;
		text-align: center;
		width: 100px;
		& .confirm {
			background-color: yellowgreen;
		}
		& .warning {
			background-color: crimson;
		}
	}
}

style.css

.frame {
  margin: 15px;
}
.frame .btn {
  padding: 10px;
  text-align: center;
  width: 100px;
}
.frame .btn .confirm {
  background-color: yellowgreen;
}
.frame .btn .warning {
  background-color: crimson;
}

부모 요소 참조 특수 선택자

• 가상 클래스 &:hover, &:nth-child, &:first-child, &::before, &::after, &::placeholder 등 &와 연결해서 사용
• 아이디, 클래스, 속성 선택자 &*id-name, &.class-name, &[type=radio] 등 &와 연결해서 사용