μ ν
μ°Έμ‘°λ¬Έμ
μ£Όμ
Modules
μλ²
1
νκ·Έ
μ€λͺ
πMDN Web Docs CSS nesting - CSS: Cascading Style Sheets | MDN
CSSμμλ scss μ²λΌ μ€μ²©μ νμλ₯Ό μ¬μ©ν μ μλ€.
&
2023λ λμ μΆκ° λμμΌλ©° μ¬μ©λ°©λ²μ scssμ κ°λ€
λ€λ₯Έμ μ΄ μλ€λ©΄ μ μ²λ¦¬κΈ°μ μ¬μ©μμ΄ λΈλΌμ°μ μμ λ°λ‘ ν΄μμ΄ κ°λ₯νλ―λ‘ λμ± νΈλ¦¬νλ€λ μ μ΄λ€.
parentRule {
/* λΆλͺ¨ κ·μΉ μ€νμΌ μμ± */
& childRule {
/* μμ κ·μΉ μ€νμΌ μμ± */
}
}
μμ κ°μ΄ μμ±νλ©΄ &
μ parentRule λ¬Έμμ΄μ κ·Έλλ‘ λ°μμ¨λ€
.card {
/* .card μ€νμΌ */
.featured & {
/* .featured .card μ€νμΌ */
}
}
/* λΈλΌμ°μ λ μ μ€μ²© κ·μΉμ λ€μκ³Ό κ°μ΄ νμ±ν©λλ€. */
.card {
/* .card μ€νμΌ */
}
.featured .card {
/* .featured .card μ€νμΌ */
}
μμ κ°μ΄ μ€λ μ§μμΌλ‘ νμλ κ²κ³Ό κ°μ΄ μ¬μ©ν μλ μλ€.
.card {
/* .card μ€νμΌ */
.featured & & & {
/* .featured .card .card .card μ€νμΌ */
}
}
μ¬λ¬λ² μ¬μ©κ°λ₯
html
<p class="example">
μ΄ λ¬Έλ¨μ <a href="#">λ§ν¬</a>λ₯Ό ν¬ν¨ν©λλ€. νΈλ²νκ±°λ ν¬μ»€μ€λ₯Ό λ§μΆ°λ³΄μΈμ.
</p>
css
.example {
font-family: system-ui;
font-size: 1.2rem;
}
.example > a {
color: tomato;
}
.example > a:hover,
.example > a:focus {
color: ivory;
background-color: tomato;
}
μμ μ½λλ₯Ό μλμ²λΌ μμ ν μ μλ€.
.example {
font-family: system-ui;
font-size: 1.2rem;
& > a {
color: tomato;
&:hover,
&:focus {
color: ivory;
background-color: tomato;
}
}
}
μ΄ μ½λλ μΉλΈλΌμ°μ μμ λ°λ‘ ν΄μμ΄ λλ€
μ‘°κΈ μμΌλ©΄ scssμ map κ³Ό for λ λμ€κ² μ§?
μ λλ€ μ¬λ―Έλλ€ π«£