&
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;
}
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;
}
&
와 선택자를 합쳐서 사용하면 클래스를 사용한 경우 선택자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]
등 &와 연결해서 사용