CSS use-rule๊ณผ ์ ์ธ์ ์คํ์ผ ์ข ์์ฑ์ ์ฌ์ธต ๋ถ์ํ์ฌ, ๊ธ๋ก๋ฒ ์น ๊ฐ๋ฐ์๊ฐ ๋ ์ ์ง๋ณด์ํ๊ธฐ ์ฝ๊ณ ํ์ฅ ๊ฐ๋ฅํ ์คํ์ผ์ํธ๋ฅผ ๊ตฌ์ถํ ์ ์๋๋ก ์ง์ํฉ๋๋ค.
CSS Use Rule ๋ง์คํฐํ๊ธฐ: ๊ธ๋ก๋ฒ ์น ๊ฐ๋ฐ์ ์ํ ์ ์ธ์ ์คํ์ผ ์ข ์์ฑ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ ๋ ๊น๋ํ๊ณ , ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ, ํ์ฅ ๊ฐ๋ฅํ CSS๋ฅผ ์ถ๊ตฌํ๋ ๊ฒ์ ์ง์์ ์ธ ๊ณผ์ ์
๋๋ค. ํ๋ก์ ํธ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํ๊ณ ํ์ด ์ฌ๋ฌ ์ง์ญ๊ณผ ๋ฌธํ์ ๋งฅ๋ฝ์ผ๋ก ํ์ฅ๋จ์ ๋ฐ๋ผ, ๊ฒฌ๊ณ ํ ์ํคํ
์ฒ ํจํด์ ํ์์ฑ์ด ๋ฌด์๋ณด๋ค ์ค์ํด์ง๋๋ค. ์ด ๋ชฉํ์ ํฌ๊ฒ ๊ธฐ์ฌํ ์ ์๋ ๊ฐ๋ ฅํ๋ฉด์๋ ๋๋ก๋ ๊ฐ๊ณผ๋๋ CSS์ ๊ธฐ๋ฅ ์ค ํ๋๊ฐ ๋ฐ๋ก ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ด๋ผ๋ ๋งฅ๋ฝ์์ ์์ฃผ ์ดํด๋๋ @use ๊ท์น์
๋๋ค.
์ด ์ข
ํฉ ๊ฐ์ด๋๋ @use ๊ท์น์ ๋ฏธ์คํฐ๋ฆฌ๋ฅผ ํ๊ณ , ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ ๋ํ ๊ทธ ์๋ฏธ๋ฅผ ํ๊ตฌํ๋ฉฐ, ์ ๋ต์ ์ธ ๊ตฌํ์ด ์ด๋ป๊ฒ ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ CSS ์ํคํ
์ฒ๋ฅผ ํ ๋จ๊ณ ๋์ด์ฌ๋ฆด ์ ์๋์ง ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋ชฉํ๋ก ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ๊ทธ ์ด์ ๊ณผ ์ค์ ์ ์ฉ ์ฌ๋ก, ๊ทธ๋ฆฌ๊ณ ๊ตญ์ ์ ์ธ ํ์
์ ํ์์ ์ธ ๋ ์กฐ์ง์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ ์คํ์ผ๋ง ์์คํ
์ ์ด๋ป๊ฒ ๊ตฌ์ถํ๋์ง ๊น์ด ํ๊ณ ๋ค ๊ฒ์
๋๋ค.
์ ์ธ์ ์คํ์ผ ์ข ์์ฑ ์ดํดํ๊ธฐ
@use์ ๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ๋ค์ด๊ฐ๊ธฐ ์ ์, ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ ๊ฐ๋
์ ํ์
ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ ํต์ ์ผ๋ก CSS๋ ์คํ์ผ์ด ์์์ ์ง์ ์ ์ฉ๋๊ณ , ์คํ์ผ์ ๋ฎ์ด์ฐ๋ ๊ฒ์ด ์บ์ค์ผ์ด๋์ ๋ช
์์ฑ ๊ท์น์ ์์กดํ๋ ๋ช
๋ นํ ๋ฐฉ์์ผ๋ก ์์ฑ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ต๋๋ค.
๋ฐ๋ฉด์ ์ ์ธ์ ํ๋ก๊ทธ๋๋ฐ์ ์ด๋ป๊ฒ๊ฐ ์๋๋ผ ๋ฌด์์ ๋ฌ์ฑํด์ผ ํ๋์ง์ ์ด์ ์ ๋ง์ถฅ๋๋ค. CSS์ ๋งฅ๋ฝ์์ ์ ์ธ์ ์คํ์ผ ์ข ์์ฑ์ด๋ ์คํ์ผ์ํธ์ ๋ค๋ฅธ ๋ถ๋ถ๋ค ๊ฐ์ ๊ด๊ณ๋ฅผ ์ ์ํ๊ณ , ํ ์คํ์ผ ์ธํธ๊ฐ ๋ค๋ฅธ ์คํ์ผ์ ์์กดํ๋ค๊ณ ๋ช ์ํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ด๋ ์๋ํ์ง ์์ ๋ถ์์ฉ์ ์ค์ด๊ณ CSS์ ์ ๋ฐ์ ์ธ ๋ช ํ์ฑ์ ํฅ์์ํค๋, ๋ ๋ช ์์ ์ด๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์์คํ ์ ๋ง๋ญ๋๋ค.
๋ชจ๋์ ์ปดํฌ๋ํธ๋ก ๊ตฌ์ถํ๋ ๊ฒ๊ณผ ๊ฐ๋ค๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. ์ง์นจ์ ์ฌ๊ธฐ์ ๊ธฐ ํฉ์ด๋๋ ๋์ , ์ด๋ค ์ปดํฌ๋ํธ๊ฐ ๋ค๋ฅธ ์ด๋ค ์ปดํฌ๋ํธ์ ์์กดํ๋์ง, ๊ทธ๋ฆฌ๊ณ ๊ทธ๋ค์ด ์ด๋ป๊ฒ ์ํธ์์ฉํ๋์ง๋ฅผ ๋ช ํํ๊ฒ ์ ์ํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ ์ ์์ ๋งค์ฐ ์ค์ํฉ๋๋ค:
- ๊ฐ๋ ์ฑ ํฅ์: ์ข ์์ฑ์ด ๋ช ํํ๊ฒ ๋ช ์๋๋ฉด ์คํ์ผ์ํธ๋ฅผ ์ดํดํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค.
- ์ ์ง๋ณด์์ฑ ํฅ์: ์ข ์์ฑ์ด ์ ์ ์๋๋ฉด ํ ๋ชจ๋์ ๋ณ๊ฒฝ์ด ๋ค๋ฅธ ๋ชจ๋์ ๋ฏธ์น๋ ์ํฅ์ด ์ค์ด๋ญ๋๋ค.
- ์ฌ์ฌ์ฉ์ฑ ์ฆ๊ฐ: ๋ช ํํ ์ข ์์ฑ์ ๊ฐ์ง ์ ์บก์ํ๋ ๋ชจ๋์ ์ฌ๋ฌ ํ๋ก์ ํธ๋ ๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ์น์ ์์ ์ฌ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
- ๋ณต์ก์ฑ ๊ฐ์: ๋ช ์์ ์ธ ์ข ์์ฑ์ ๋๊ท๋ชจ CSS ์ฝ๋๋ฒ ์ด์ค์ ๋ด์ฌ๋ ๋ณต์ก์ฑ์ ๊ด๋ฆฌํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
@use ๊ท์น์ ์ญํ
2020๋
CSS์ ๋์
๋๊ณ Sass์ ๊ฐ์ ์ต์ CSS ์ ์ฒ๋ฆฌ๊ธฐ์ ์ํด ๋๋ฆฌ ์ง์๋๋ @use ๊ท์น์ ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ ๋ฌ์ฑํ๊ธฐ ์ํ ๊ธฐ๋ณธ ์์์
๋๋ค. ์ด๋ฅผ ํตํด CSS ๋๋ Sass ๋ชจ๋์ ๊ฐ์ ธ์ ๋ก๋ํ๊ณ , ๊ทธ ๋ณ์, ๋ฏน์ค์ธ, ํจ์๋ฅผ ํ์ฌ ๋ฒ์ ๋ด์์ ์ฌ์ฉํ ์ ์๊ฒ ํฉ๋๋ค.
์ด์ ์ ๊ฐ์ ธ์ค๊ธฐ ๋ฐฉ๋ฒ(Sass์ @import ๋๋ ๋ค์ดํฐ๋ธ CSS @import ๋ฑ)๊ณผ ๋ฌ๋ฆฌ, @use๋ ๋ค์์คํ์ด์ค์ ์ค์ฝํ ๊ฐ๋
์ ๋์
ํ์ฌ ์ข
์์ฑ์ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
@use์ ์๋ ๋ฐฉ์: ๋ค์์คํ์ด์ค์ ์ค์ฝํ
@use ๊ท์น์ ์ฌ์ฉํ๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์๋ํฉ๋๋ค:
- ๋ชจ๋ ๋ก๋: ๋ค๋ฅธ ํ์ผ์์ ์คํ์ผ์ ๊ฐ์ ธ์ต๋๋ค.
- ๋ค์์คํ์ด์ค ์์ฑ: ๊ธฐ๋ณธ์ ์ผ๋ก ๋ก๋๋ ๋ชจ๋์ ๋ชจ๋ ๋ฉค๋ฒ(๋ณ์, ๋ฏน์ค์ธ, ํจ์)๋ ๋ชจ๋์ ํ์ผ๋ช ์์ ํ์๋ ๋ค์์คํ์ด์ค ๋ด์ ๋ฐฐ์น๋ฉ๋๋ค. ์ด๋ ์ด๋ฆ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ํน์ ์คํ์ผ์ด ์ด๋์์ ์๋์ง ๋ช ํํ๊ฒ ํด์ค๋๋ค.
- ์ ์ญ ์ค์ฝํ ์ ํ: ๊ฐ์ ธ์จ ๋ชจ๋ ๊ท์น์ ํ์ฌ ์ค์ฝํ์ ์์๋ถ๋
@import์ ๋ฌ๋ฆฌ,@use๋ ๋ ํต์ ๋ฉ๋๋ค. ๊ฐ์ ธ์ค๋ ํ์ผ์ ์ง์ ์ ์๋ ์คํ์ผ(๋ฏน์ค์ธ์ด๋ ํจ์ ๋ด์ ์์ง ์์)์ ํ ๋ฒ๋ง ๋ก๋๋๋ฉฐ, ๊ทธ ์ ์ญ์ ์ํฅ์ด ๊ด๋ฆฌ๋ฉ๋๋ค.
์๋ฅผ ๋ค์ด ์ค๋ช ํด ๋ณด๊ฒ ์ต๋๋ค:
_variables.scss๋ผ๋ ํ์ผ์ด ์๋ค๊ณ ์์ํด ๋ณด์ธ์:
// _variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
๊ทธ๋ฆฌ๊ณ _buttons.scss๋ผ๋ ๋ ๋ค๋ฅธ ํ์ผ์ด ์์ต๋๋ค:
// _buttons.scss
.button {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
&--primary {
background-color: $primary-color;
color: white;
}
&--secondary {
background-color: $secondary-color;
color: white;
}
}
๋ฉ์ธ ์คํ์ผ์ํธ์ธ styles.scss์์๋ ๋ค์๊ณผ ๊ฐ์ด @use๋ฅผ ์ฌ์ฉํฉ๋๋ค:
// styles.scss
@use 'variables'; // Loads _variables.scss
@use 'buttons'; // Loads _buttons.scss
body {
font-family: sans-serif;
}
.main-header {
background-color: variables.$primary-color; // Accessing variable via namespace
color: white;
padding: 20px;
}
$primary-color๊ฐ ์ด๋ป๊ฒ variables.$primary-color๋ฅผ ์ฌ์ฉํ์ฌ ์ ๊ทผ๋๋์ง ์ฃผ๋ชฉํ์ธ์. ์ด ๋ช
์์ ์ธ ์ฐธ์กฐ๋ ํด๋น ์์์ด variables ๋ชจ๋์์ ์๋ค๋ ๊ฒ์ ๋ช
ํํ๊ฒ ๋ํ๋
๋๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ ๋ณธ์ง์
๋๋ค.
๊ธ๋ก๋ฒ ๊ฐ๋ฐ์ ์ํ @use์ ์ด์
@use ์ฌ์ฉ์ ์ด์ ์ ๊ตญ์ ์ ์ด๊ฑฐ๋ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ์์
ํ ๋ ํนํ ์ค์ํฉ๋๋ค:
- ์ด๋ฆ ์ถฉ๋ ๋ฐฉ์ง: ๊ธ๋ก๋ฒ ํ์์๋ ์ฌ๋ฌ ๊ฐ๋ฐ์๊ฐ ์ ์ฌํ ๋ณ์ ์ด๋ฆ(์: `$color-blue`)์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์์คํ์ด์ค๋ ํ ๋ชจ๋์ `$color-blue`๊ฐ ๋ค๋ฅธ ๋ชจ๋์ `$color-blue`์ ์ถฉ๋ํ์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ๋ชจ๋ํ ๋ฐ ์บก์ํ:
@use๋ CSS๋ฅผ ๋ ์๊ณ ๋ ๋ฆฝ์ ์ธ ๋ชจ๋๋ก ๋๋๋๋ก ์ฅ๋ คํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ค๋ฅธ ์ง์ญ์ ๊ฐ๋ฐ์๋ค์ด ์๋ก์ ์์ ์ ๋ฐฉํดํ์ง ์๊ณ ํน์ ์ปดํฌ๋ํธ์ ๋ํด ์์ ํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ฝ ํ์ UI ์ปดํฌ๋ํธ๋ฅผ ๊ด๋ฆฌํ๊ณ , ์์์ ํ์ ํ์ดํฌ๊ทธ๋ํผ์ ๊ตญ์ ํ ์คํ์ผ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค. - ๋ ๋ช
ํํ ์ข
์์ฑ: ์๋ก์ด ๊ฐ๋ฐ์๊ฐ ํ๋ก์ ํธ์ ์ฐธ์ฌํ๊ฑฐ๋, ๊ฐ๋ฐ์๊ฐ ๋ค๋ฅธ ์คํ์ผ๋ค์ด ์ด๋ป๊ฒ ์ํธ์์ฉํ๋์ง ์ดํดํด์ผ ํ ๋,
@use๊ตฌ๋ฌธ์ ๋ชจ๋๋ค์ด ์๋ก ์ด๋ป๊ฒ ์์กดํ๋์ง์ ๋ํ ๋ช ํํ ์ง๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋ค์ํ ํ ๊ฐ์ ์จ๋ณด๋ฉ ๋ฐ ์ง์ ์ ๋ฌ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. - ํต์ ๋ ์ ์ญ ์ค์ฝํ:
@import์ ๋ฌ๋ฆฌ,@use๋ CSS๊ฐ ์ฌ๋ฌ ๋ฒ ์ฐ์ฐํ ๋ก๋๋์ด ๊ฒฐ๊ณผ๋ฌผ์ด ๋น๋ํด์ง๊ณ ์์์น ๋ชปํ ์คํ์ผ ๋ฎ์ด์ฐ๊ธฐ๊ฐ ๋ฐ์ํ๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ์ด๋ ์ต์ข ์ฌ์ฉ์์ ์์น๋ ์ฅ์น์ ๊ด๊ณ์์ด ์์ธก ๊ฐ๋ฅํ ๋ ๋๋ง์ ๋ณด์ฅํฉ๋๋ค. - ํ
๋งํ ๋ฐ ์ฌ์ฉ์ ์ ์:
@use๋ฅผ ์ฌ์ฉํ๋ฉด ์ค์ ๊ตฌ์ฑ ๋๋ ํ ๋ง ๋ชจ๋์ ๋ง๋ค๊ณ ์ด๋ฅผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ํ ๋ถ๋ถ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ ๊ธ๋ก๋ฒ ์ ํ์ ๋ํด ๋ค์ํ ๋ธ๋๋ ๋ณํ์ด๋ ์ง์ญํ๋ ํ ๋ง๋ฅผ ๋ง๋๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค. - ๋ฏธ๋ ๋๋น: CSS๊ฐ ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ,
@use์ ๊ฐ์ ๊ธฐ๋ฅ์ ์คํ์ผ๋ง์ ๋ํ ๋ ๊ฒฌ๊ณ ํ๊ณ ์กฐ์ง์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ์ด์งํ์ฌ, ํ์์ ๋ฐ๋ผ ์๋ก์ด ํ์ค์ ์ฑํํ๊ณ ์ฝ๋๋ฅผ ๋ฆฌํฉํฐ๋งํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
@use๋ฅผ ์ด์ฉํ CSS ๊ตฌ์กฐํ: ๋ชจ๋์ ์ ๊ทผ๋ฒ
@use๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฑํํ๋ ค๋ฉด ์ ์ง์ธ CSS ์ํคํ
์ฒ๊ฐ ํ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ด๊ณ ํจ๊ณผ์ ์ธ ์ ๋ต์ ์ข
์ข
๋์์ธ ์์คํ
๋๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ CSS๋ผ๊ณ ๋ถ๋ฆฌ๋ ๋ชจ๋์ ์ ๊ทผ๋ฒ์ ๋ฐ๋ฅด๋ ๊ฒ์
๋๋ค.
1. ์ฝ์ด ๋ชจ๋ ๊ตฌ์ถ (๋ณ์ ๋ฐ ๋ฏน์ค์ธ)
์ ์ญ ๋ณ์, ๋์์ธ ํ ํฐ, ๊ณตํต ๋ฏน์ค์ธ ๋ฐ ์ ํธ๋ฆฌํฐ ํจ์๋ฅผ ๋ด๋ ์ค์ ๋ชจ๋์ ๋๋ ๊ฒ์ด ์ข์ต๋๋ค. ์ด ๋ชจ๋์ ์ด๋ฌํ ๊ธฐ๋ณธ ์คํ์ผ์ด ํ์ํ ๊ฑฐ์ ๋ชจ๋ ๋ค๋ฅธ ๋ชจ๋์์ ๋ก๋๋์ด์ผ ํฉ๋๋ค.
๊ตฌ์กฐ ์์:
abstracts/_variables.scss: ์ ์ญ ์์ ํ๋ ํธ, ํ์ดํฌ๊ทธ๋ํผ ์ค์ผ์ผ, ๊ฐ๊ฒฉ ๋จ์, ์ค๋จ์ . ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ๋ฌ ์ธ์ด ๋ฒ์ ์์ ์๊ฐ์ ์ผ๊ด์ฑ์ ์ ์งํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค._mixins.scss: ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ CSS ์ค๋ํซ (์: ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋ฏน์ค์ธ, clearfix, ๋ฒํผ ์คํ์ผ)._functions.scss: ๊ณ์ฐ ๋๋ ๋ณํ์ ์ํ ์ฌ์ฉ์ ์ ์ ํจ์._helpers.scss: ์ ํธ๋ฆฌํฐ ํด๋์ค ๋๋ ํ๋ ์ด์คํ๋ ์ ํ์.
๊ธฐ๋ณธ ์คํ์ผ์ํธ(์: main.scss)์์:
@use 'abstracts/variables' as vars;
@use 'abstracts/mixins' as mixins;
// Now use them throughout
body {
font-family: vars.$font-primary;
}
.card {
padding: 20px;
@include mixins.border-radius(4px);
}
์ฌ๊ธฐ์๋ as ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ variables ๋ชจ๋์ vars๋ก, mixins๋ฅผ mixins๋ก ๋ณ์นญ์ ์ง์ ํ์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ ์งง๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์ฐธ์กฐ๋ฅผ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ฌ๋ฌ ๋ชจ๋์ด ์ฐ์ฐํ ๋์ผํ ํ์ผ ์ด๋ฆ์ ๊ฐ์ง ๊ฒฝ์ฐ ๋ฐ์ํ ์ ์๋ ์ด๋ฆ ์ถฉ๋์ ํผํ๋ ๋ฐ๋ ๋์์ด ๋ฉ๋๋ค.
2. ์ปดํฌ๋ํธ ์์ค ๋ชจ๋
๊ฐ UI ์ปดํฌ๋ํธ๋ ์ด์์ ์ผ๋ก ์์ฒด SCSS ํ์ผ์ ์์ด์ผ ํฉ๋๋ค. ์ด๋ ์บก์ํ๋ฅผ ์ด์งํ๊ณ ์ธํฐํ์ด์ค์ ๊ฐ๋ณ ๋ถ๋ถ์ ๋ํ ์คํ์ผ์ ๊ด๋ฆฌํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
๊ตฌ์กฐ ์์:
components/_button.scss_card.scss_modal.scss_navbar.scss
_button.scss ๋ด๋ถ:
@use '../abstracts/variables' as vars;
@use '../abstracts/mixins' as mixins;
.button {
display: inline-block;
padding: vars.$spacing-medium vars.$spacing-large;
font-size: vars.$font-size-base;
line-height: vars.$line-height-base;
text-align: center;
text-decoration: none;
cursor: pointer;
@include mixins.border-radius(vars.$border-radius-small);
transition: background-color 0.2s ease-in-out;
&:hover {
filter: brightness(90%);
}
&--primary {
background-color: vars.$primary-color;
color: vars.$color-white;
}
&--secondary {
background-color: vars.$secondary-color;
color: vars.$color-white;
}
}
๊ทธ๋ฐ ๋ค์ ๋ฉ์ธ ์คํ์ผ์ํธ๋ ์ด๋ฌํ ์ปดํฌ๋ํธ ๋ชจ๋์ ๊ฐ์ ธ์ต๋๋ค:
// main.scss
@use 'abstracts/variables' as vars;
@use 'abstracts/mixins' as mixins;
@use 'components/button';
@use 'components/card';
@use 'components/modal';
// Global styles
body {
font-family: vars.$font-primary;
line-height: vars.$line-height-base;
color: vars.$text-color;
}
// Utility styles or layout styles can also be imported
@use 'layout/grid';
@use 'utilities/spacing';
3. ๋ ์ด์์ ๋ฐ ํ์ด์ง๋ณ ์คํ์ผ
๋ ์ด์์ ์คํ์ผ๊ณผ ํน์ ํ์ด์ง๋ ์ ํ๋ฆฌ์ผ์ด์ ์น์ ์ ํนํ๋ ์คํ์ผ๋ ๋ณ๋์ ๋ชจ๋์์ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
๊ตฌ์กฐ ์์:
layout/_header.scss_footer.scss_grid.scss
pages/_home.scss_about.scss
main.scss๋ ์ด๋ค๋ ํฌํจํ๊ฒ ๋ฉ๋๋ค:
// main.scss (continued)
@use 'layout/header';
@use 'layout/footer';
@use 'layout/grid';
@use 'pages/home';
@use 'pages/about';
@use ๊ท์น์ ์ํด ๊ตฌ๋๋๋ ์ด ๊ณ์ธต์ ๊ตฌ์กฐ๋ ์คํ์ผ์ํธ์ ๋ํ ๋ช
ํํ ์ข
์์ฑ ๊ทธ๋ํ๋ฅผ ์์ฑํ์ฌ, ํ๋ก์ ํธ๊ฐ ์ฑ์ฅํ๊ณ ๊ธ๋ก๋ฒ ํ์ด ํ์
ํจ์ ๋ฐ๋ผ ๊ด๋ฆฌํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ๊ฐ ํจ์ฌ ์ฌ์์ง๋๋ค.
๊ณ ๊ธ @use ๊ธฐ๋ฅ
@use ๊ท์น์ ์คํ์ผ ์ข
์์ฑ ๊ด๋ฆฌ๋ฅผ ์ํ ๋ฅ๋ ฅ์ ๋์ฑ ํฅ์์ํค๋ ์ฌ๋ฌ ๊ณ ๊ธ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค:
1. ๋ณ์นญ์ ์ํ as ํค์๋
์์ ๋ณด์ฌ๋๋ฆฐ ๊ฒ์ฒ๋ผ, as ํค์๋๋ฅผ ์ฌ์ฉํ๋ฉด ๋ชจ๋์ ๋ค์์คํ์ด์ค ์ด๋ฆ์ ๋ฐ๊ฟ ์ ์์ต๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์ ์ ์ฉํฉ๋๋ค:
- ๋ ์งง์ ์ฐธ์กฐ:
abstracts-variables-spacing-medium์ ์ ๋ ฅํ๋ ๋์ ,@use 'abstracts/variables' as vars;๋ก ๋ณ์นญ์ ์ง์ ํ๋ฉดvars.spacing-medium์ ์ฌ์ฉํ ์ ์์ต๋๋ค. - ์ถฉ๋ ํํผ: ์ด๋ฆ์ด ๋์ผํ ๋ฉค๋ฒ๋ฅผ ๊ฐ์ง ์ ์๋ ๋ ๋ชจ๋์ ๋ก๋ํด์ผ ํ๋ ๊ฒฝ์ฐ,
@use 'theme-light' as light;์@use 'theme-dark' as dark;์ฒ๋ผ ๋ค๋ฅด๊ฒ ๋ณ์นญ์ ์ง์ ํ ์ ์์ต๋๋ค.
2. ๊ตฌ์ฑ์ ์ํ with ์
with ์ ์ ์ฌ์ฉํ๋ฉด ๋ชจ๋์ ๊ตฌ์ฑ์ ์ ๋ฌํ์ฌ ๊ธฐ๋ณธ ๋ณ์ ๊ฐ์ ์ฌ์ ์ํ ์ ์์ต๋๋ค. ์ด๋ ํ
๋งํ ๋ฐ ์ฌ์ฉ์ ์ ์์ ๋งค์ฐ ๊ฐ๋ ฅํ์ฌ, ์ ํ๋ฆฌ์ผ์ด์
์ ๋ค๋ฅธ ๋ถ๋ถ์ด๋ ๋ค๋ฅธ ํด๋ผ์ด์ธํธ๊ฐ ๊ณต์ ์ปดํฌ๋ํธ ์ธํธ๋ฅผ ์์ ๋ง์ ๊ณ ์ ํ ์คํ์ผ๋ก ์ฌ์ฉํ ์ ์๊ฒ ํฉ๋๋ค.
๊ธฐ๋ณธ ์์์ ๋ฐ๋ ๋ฒํผ ๋ชจ๋์ ์๊ฐํด ๋ณด์ธ์:
// _button.scss
@use '../abstracts/variables' as vars;
.button {
// ... other styles
background-color: vars.$button-primary-bg;
color: vars.$button-primary-text;
// ...
}
์ด์ , ๋ฉ์ธ ์คํ์ผ์ํธ์์ ๋ฒํผ์ ์์์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค:
// main.scss
@use 'abstracts/variables' as vars;
@use 'components/button' with (
$button-primary-bg: #28a745,
$button-primary-text: white
);
.special-button {
@extend %button-primary; // Assuming you have %button-primary as a placeholder in _button.scss
background-color: #ffc107;
color: #212529;
}
์ด ๋ฉ์ปค๋์ฆ์ ๋ธ๋๋๋ณ ์์ ํ๋ ํธ๋ ์คํ์ผ ๋ณํ์ด ํ์ํ ์ ์๋ ๊ตญ์ ํด๋ผ์ด์ธํธ์๊ฒ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ธ๋ก๋ฒ ํ์ฌ๋ ์ ์ ์ง ๊ด๋ฆฌ๋๋ ๋จ์ผ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ง ์ ์์ผ๋ฉฐ, ๊ฐ ์ง์ญ ์ง์ฌ๋ with ์ ์ ์ฌ์ฉํ์ฌ ๋ธ๋๋ฉ์ผ๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
3. ๊ธฐ๋ฅ ์ ์ด๋ฅผ ์ํ show ๋ฐ hide ํค์๋
show์ hide๋ฅผ ์ฌ์ฉํ์ฌ ํ์ฌ ์ค์ฝํ์์ ์ฌ์ฉํ ์ ์๋ ๋ก๋๋ ๋ชจ๋์ ๋ฉค๋ฒ๋ฅผ ์ ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค.
show: ์ง์ ๋ ๋ฉค๋ฒ๋ง ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.hide: ์ง์ ๋ ๋ฉค๋ฒ๋ฅผ ์ ์ธํ ๋ชจ๋ ๋ฉค๋ฒ๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์์:
// Only load the primary color and the border-radius mixin
@use '../abstracts/variables' as vars show $primary-color;
@use '../abstracts/mixins' as mixins hide placeholder-mixin;
// Now you can only use vars.$primary-color and mixins.border-radius
// You cannot access $secondary-color or placeholder-mixin.
์ด๋ฌํ ์ธ๋ถํ๋ ์ ์ด๋ ๊ฐ๋ฐ์๊ฐ ๋ชจ๋์ ์๋๋ ๊ธฐ๋ฅ์๋ง ์ ๊ทผํ๋๋ก ๋ณด์ฅํ์ฌ, ๋ ์์ ์ ์ด๊ฑฐ๋ ๋ ์ด์ ์ฌ์ฉ๋์ง ์๋ ๋ถ๋ถ์ ์ฐ๋ฐ์ ์ธ ์ฌ์ฉ์ ๋ฐฉ์งํ๋ ๋ฐ ์ ์ฉํ๋ฉฐ, ์ด๋ ๋ถ์ฐ๋ ํ์์ ํํ ๋ฐ์ํ๋ ๋ฌธ์ ์ ๋๋ค.
@use์ @import ๋น๊ต
@use๊ฐ ์ @import์ ์ฐ์ํ ๋์ฒด์ฌ์ธ์ง, ํนํ ํ๋ CSS ์ํคํ
์ฒ์ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์ ๋งฅ๋ฝ์์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
| ๊ธฐ๋ฅ | @use |
@import |
|---|---|---|
| ์ค์ฝํ | ๋ค์์คํ์ด์ค๋ฅผ ์์ฑํฉ๋๋ค. ๋ณ์, ๋ฏน์ค์ธ, ํจ์๋ ๋ชจ๋์ ์ค์ฝํ๊ฐ ์ง์ ๋๊ณ ๋ค์์คํ์ด์ค๋ฅผ ํตํด ์ ๊ทผํฉ๋๋ค(์: module.$variable). |
๋ชจ๋ ๋ฉค๋ฒ๋ฅผ ํ์ฌ ์ค์ฝํ์ ์์๋ถ์ต๋๋ค. ์ด๋ฆ ์ถฉ๋ ๋ฐ ์ ์ญ ๋ค์์คํ์ด์ค ์ค์ผ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. |
| ํ์ผ ๋ก๋ฉ | ์ฌ๋ฌ ๋ฒ `@use`๋์ด๋ ๋ชจ๋์ ํ ๋ฒ๋ง ๋ก๋ํฉ๋๋ค. | ์ฃผ์ ๊น๊ฒ ๊ด๋ฆฌํ์ง ์์ผ๋ฉด ๋์ผํ ํ์ผ์ ์ฌ๋ฌ ๋ฒ ๋ก๋ํ์ฌ ์ค๋ณต๋ CSS ๊ท์น๊ณผ ํ์ผ ํฌ๊ธฐ ์ฆ๊ฐ๋ฅผ ์ ๋ฐํ ์ ์์ต๋๋ค. |
| CSS ์ฌ์ฉ์ ์ ์ ์์ฑ (๋ณ์) | ์ฌ์ฉ์ ์ ์ ์์ฑ์ด ์๋ ์ผ๋ฐ CSS๋ฅผ ๋ก๋ํ ๋, ๊ธฐ๋ณธ์ ์ผ๋ก๋ ์ฌ์ ํ ์ ์ญ์ ์ด์ง๋ง, ๊ฐ์ ธ์จ CSS๊ฐ @property๋ฅผ ์ฌ์ฉํ๊ณ ๋ชจ๋ ๋ก๋ฉ์ ์ํด ๋ช
์์ ์ผ๋ก ์ค๊ณ๋ ๊ฒฝ์ฐ ๋ค์์คํ์ด์ค๋ฅผ ๊ฐ์ง ์ ์์ต๋๋ค. (๋ ๊ณ ๊ธ ์ฌ์ฉ ์ฌ๋ก). |
์ ์๋ ๋ชจ๋ CSS ๋ณ์๋ก ํญ์ ์ ์ญ ์ค์ฝํ๋ฅผ ์ค์ผ์ํต๋๋ค. |
| ์ข ์์ฑ ๊ด๋ฆฌ | ์ข ์์ฑ์ ๋ช ์์ ์ผ๋ก ์ ์ํ์ฌ ๋ชจ๋์ฑ์ ์ด์งํ๊ณ CSS ๊ตฌ์กฐ๋ฅผ ๋ ๋ช ํํ๊ฒ ๋ง๋ญ๋๋ค. | ์์์ ์ข ์์ฑ์ ์ข ์ข ํ๊ธฐ ์ด๋ ค์ด ์ฝํ ์คํ์ผ ์น์ผ๋ก ์ด์ด์ง๋๋ค. |
| ๊ตฌ์ฑ | ํ
๋งํ ๋ฐ ์ฌ์ฉ์ ์ ์๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ตฌ์ฑ ๋ณ์ ์ ๋ฌ์ ์ํด with ์ ์ ์ง์ํฉ๋๋ค. |
๊ฐ์ ธ์ค๊ธฐ ์์ค์์ ๊ตฌ์ฑ์ด๋ ํ ๋งํ๋ฅผ ์ํ ๋ด์ฅ ๋ฉ์ปค๋์ฆ์ด ์์ต๋๋ค. |
| ๊ธฐ๋ฅ ์ ์ด | ๊ฐ์ ธ์จ ๋ฉค๋ฒ์ ๋ํ ์ธ๋ถํ๋ ์ ์ด๋ฅผ ์ํด show ๋ฐ hide ํค์๋๋ฅผ ์ง์ํฉ๋๋ค. |
๊ธฐ๋ฅ ์ ์ด๊ฐ ์์ผ๋ฉฐ, ๋ชจ๋ ๋ฉค๋ฒ๊ฐ ๊ฐ์ ธ์์ง๋๋ค. |
@import์์ @use๋ก์ ์ ํ์ CSS๋ฅผ ๊ด๋ฆฌํ๋ ๋ ๊ท์จ ์๊ณ ์์ธก ๊ฐ๋ฅํ ๋ฐฉ์์ผ๋ก์ ์ด๋์ ๋ํ๋ด๋ฉฐ, ์ด๋ ๋ค์ํ ํ๊ณผ ์ง๋ฆฌ์ ์์น์ ๊ฑธ์ณ ์ผ๊ด์ฑ๊ณผ ์ ์ง๋ณด์์ฑ์ ์๊ตฌํ๋ ๊ธ๋ก๋ฒ ํ๋ก์ ํธ์ ํ์์ ์
๋๋ค.
๊ธ๋ก๋ฒ ํ์ ์ํ ์ค์ง์ ์ธ ๊ณ ๋ ค์ฌํญ
๊ธ๋ก๋ฒ ํ์์ @use๋ฅผ ์ฌ์ฉํ์ฌ CSS ์ํคํ
์ฒ๋ฅผ ๊ตฌํํ ๋ ๋ค์๊ณผ ๊ฐ์ ์ค์ง์ ์ธ ์ธก๋ฉด์ ๊ณ ๋ คํด์ผ ํฉ๋๋ค:
- ํ์คํ๋ ๋ช ๋ช ๊ท์น: ๋ค์์คํ์ด์ค๊ฐ ์๋๋ผ๋ ๋ชจ๋, ๋ณ์, ๋ฏน์ค์ธ์ ๋ํ ์ผ๊ด๋ ๋ช ๋ช ๊ท์น์ ํฉ์ํ๋ ๊ฒ์ ๊ฐ๋ ์ฑ๊ณผ ํ์ ์ ์ฉ์ด์ฑ์ ์ํด ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ ํนํ ๋ค๋ฅธ ์ธ์ด์ ๋ฐฐ๊ฒฝ์ ๋ค๋ฃฐ ๋ ์ค์ํฉ๋๋ค.
- ๋ช ํํ ๋ฌธ์ํ: ๋ชจ๋ ๊ตฌ์กฐ, ๊ฐ ๋ชจ๋์ ๋ชฉ์ , ๊ทธ๋ฆฌ๊ณ ์๋ก ์ด๋ป๊ฒ ์์กดํ๋์ง๋ฅผ ๋ฌธ์ํํ์ธ์. ์ ๋ฌธ์ํ๋ ์ํคํ ์ฒ๋ ๋ถ์ฐ๋ ํ์๊ฒ ์ํํ ์ํฌํ๋ก์ฐ์ ์ง์์ ์ธ ํผ๋ ์ฌ์ด์ ์ฐจ์ด๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ๋ฒ์ ๊ด๋ฆฌ ์ ๋ต: ๊ฒฌ๊ณ ํ ๋ฒ์ ๊ด๋ฆฌ ์ ๋ต(์: Git)์ด ๋ง๋ จ๋์ด ์๋์ง ํ์ธํ์ธ์. ๊ณต์ CSS ๋ชจ๋์ ๋ณ๊ฒฝ ์ฌํญ์ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๊ธฐ ์ํด ๋ธ๋์นญ, ๋ณํฉ ๋ฐ ํ ๋ฆฌํ์คํธ๊ฐ ์ ์ ์๋์ด์ผ ํฉ๋๋ค.
- ์ง์์ ํตํฉ/์ง์์ ๋ฐฐํฌ (CI/CD): CI/CD ํ์ดํ๋ผ์ธ์ ์ผ๋ถ๋ก Sass/SCSS๋ฅผ CSS๋ก ์ปดํ์ผํ๋ ๊ณผ์ ์ ์๋ํํ์ธ์. ์ด๋ฅผ ํตํด ํญ์ ์ต์ ์, ์ฌ๋ฐ๋ฅด๊ฒ ๊ตฌ์กฐํ๋ CSS๊ฐ ๋ฐฐํฌ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์จ๋ณด๋ฉ ํ๋ก์ธ์ค: ๋ค๋ฅธ ์ง์ญ์์ ํฉ๋ฅํ๋ ์๋ก์ด ํ์๋ค์ ์ํด CSS ์ํคํ ์ฒ๋ ์จ๋ณด๋ฉ ํ๋ก์ธ์ค์ ํต์ฌ ๋ถ๋ถ์ด ๋์ด์ผ ํฉ๋๋ค. ๋ชจ๋์ ์คํ์ผ์ํธ๋ฅผ ์ฌ์ฉํ๊ณ ๊ธฐ์ฌํ๋ ๋ฐฉ๋ฒ์ ๋ํ ๋ช ํํ ํํ ๋ฆฌ์ผ๊ณผ ์ง์นจ์ ์ ๊ณตํ์ธ์.
- ์ ๊ทผ์ฑ ํ์ค: ๋์์ธ ํ ํฐ(์์, ํ์ดํฌ๊ทธ๋ํผ, ๊ฐ๊ฒฉ์ ๋ํ ๋ณ์)์ด WCAG ๊ฐ์ด๋๋ผ์ธ์ ์ค์ํ์ฌ ์ ๊ทผ์ฑ์ ์ผ๋์ ๋๊ณ ์ ์๋์๋์ง ํ์ธํ์ธ์. ์ด๋ ๋ณดํธ์ ์ธ ์๊ตฌ์ฌํญ์ด๋ฉฐ ์ถ์ ๋ชจ๋์ ์ด์์ด ๋์ด์ผ ํฉ๋๋ค.
- ํ์งํ ๊ณ ๋ ค์ฌํญ: CSS ์์ฒด๊ฐ ์ง์ ํ ์คํธ ๋ฒ์ญ์ ๋ด๋นํ์ง๋ ์์ง๋ง, ์ํคํ ์ฒ๋ ํ์งํ๋ฅผ ์ง์ํด์ผ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํ์ดํฌ๊ทธ๋ํผ ๋ชจ๋์ ๋ฒ์ญ์ผ๋ก ์ธํด ๋ฐ์ํ๋ ๋ค์ํ ๊ธ๊ผด ์คํ๊ณผ ํ ์คํธ ๊ธธ์ด๋ฅผ ์์ฉํด์ผ ํฉ๋๋ค. ๋ชจ๋์ ์ ๊ทผ๋ฒ์ ๋ก์ผ์ผ๋ณ๋ก ์กฐ์ ์ด ํ์ํ ์ ์๋ ์คํ์ผ์ ๋ถ๋ฆฌํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
CSS์ ์ ์ธ์ ์คํ์ผ๋ง์ ๋ฏธ๋
Sass์์ @use์ @forward(๋ชจ๋์ด ๋ค๋ฅธ ๋ชจ๋์ ๋ฉค๋ฒ๋ฅผ ๋ค์ ๋ด๋ณด๋ผ ์ ์๊ฒ ํจ)์ ๋์
๊ณผ ๋ค์ดํฐ๋ธ CSS ๊ธฐ๋ฅ์ ์ง์์ ์ธ ๋ฐ์ ์ CSS๊ฐ ๋ ์ปดํฌ๋ํธ ์งํฅ์ ์ด๊ณ ์ ์ธ์ ์ด ๋ ๋ฏธ๋๋ฅผ ๊ฐ๋ฆฌํต๋๋ค. ๋ค์ดํฐ๋ธ CSS ๋ํ ๋ ๋๋ฆฐ ์๋์ด๊ธด ํ์ง๋ง ๋ชจ๋์ฑ๊ณผ ์ข
์์ฑ ๊ด๋ฆฌ๋ฅผ ์ํ ๊ธฐ๋ฅ์ ๊ฐ์ถ์ด ๊ฐ๊ณ ์์ต๋๋ค.
CSS ๋ชจ๋ ๋ฐ CSS-in-JS ์๋ฃจ์
๊ณผ ๊ฐ์ ๊ธฐ๋ฅ๋ค๋ ์ค์ฝํ์ ์ข
์์ฑ์ ์ ์ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ฒ์ ๋ชฉํ๋ก ํ์ง๋ง, ํนํ Sass ์ํ๊ณ ๋ด์ @use๋ ์ ์ธ๊ณ ์น ๊ฐ๋ฐ ์ปค๋ฎค๋ํฐ์ ์๋น ๋ถ๋ถ์์ ๋๋ฆฌ ์ฑํ๋๊ณ ์ ์ดํด๋๋ ๊ฐ๋ ฅํ๊ณ ํตํฉ๋ ์๋ฃจ์
์ ์ ๊ณตํฉ๋๋ค.
@use ๊ท์น์ ํตํด ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ ์์ฉํจ์ผ๋ก์จ, ๊ฐ๋ฐ์๋ ๋ค์๊ณผ ๊ฐ์ CSS ์์คํ
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค:
- ๊ฒฌ๊ณ ํจ: ์ค๋ฅ์ ์์์น ๋ชปํ ๋ถ์์ฉ ๋ฐ์ ๊ฐ๋ฅ์ฑ์ด ์ ์ต๋๋ค.
- ํ์ฅ ๊ฐ๋ฅํจ: ๊ธฐ๋ฅ ๋ฐ ํ ๊ท๋ชจ์ ์ฑ์ฅ์ ์ฝ๊ฒ ์์ฉํฉ๋๋ค.
- ์ ์ง๋ณด์ ์ฉ์ดํจ: ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ ๋ฐ์ดํธ, ๋ฆฌํฉํฐ๋ง ๋ฐ ๋๋ฒ๊น ์ด ๋ ๊ฐ๋จํฉ๋๋ค.
- ํ์ ์ฉ์ดํจ: ๋ค์ํ ์ง๋ฆฌ์ ๋ฐ ๋ฌธํ์ ํ๊ฒฝ์์ ๋ ์ํํ ํ์ํฌ๋ฅผ ์ด์งํฉ๋๋ค.
๊ฒฐ๋ก
@use ๊ท์น์ ๋จ์ํ ๊ตฌ๋ฌธ ์
๋ฐ์ดํธ ๊ทธ ์ด์์
๋๋ค; ๊ทธ๊ฒ์ CSS์ ๋ํ ๋ ์กฐ์ง์ ์ด๊ณ , ์๋์ ์ด๋ฉฐ, ์ ์ธ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ผ๋ก์ ํจ๋ฌ๋ค์ ์ ํ์
๋๋ค. ๊ธ๋ก๋ฒ ์น ๊ฐ๋ฐํ์๊ฒ ์ด ๊ท์น์ ๋ง์คํฐํ๊ณ ๋ชจ๋์ CSS ์ํคํ
์ฒ๋ฅผ ๊ตฌํํ๋ ๊ฒ์ ๋จ์ํ ๋ชจ๋ฒ ์ฌ๋ก๊ฐ ์๋๋ผ, ์ ์ธ๊ณ์ ์ผ๋ก ์ผ๊ด๋๊ฒ ๋ณด์ด๊ณ ๊ธฐ๋ฅํ๋ ๋ณต์กํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ ํ์ฅ ๊ฐ๋ฅํ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถํ๊ธฐ ์ํ ํ์ ์์์
๋๋ค.
๋ค์์คํ์ด์ค, ๊ตฌ์ฑ ๋ฐ ํต์ ๋ ์ค์ฝํ์ ํ์ฉํจ์ผ๋ก์จ, @use๋ ๊ฐ๋ฐ์๊ฐ ๋ช
ํํ ์ข
์์ฑ์ ์์ฑํ๊ณ , ์ด๋ฆ ์ถฉ๋์ ๋ฐฉ์งํ๋ฉฐ, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์คํ์ผ ๋ชจ๋์ ๊ตฌ์ถํ ์ ์๋๋ก ์ง์ํฉ๋๋ค. ์ด๋ ๋ ํจ์จ์ ์ธ ์ํฌํ๋ก์ฐ, ๊ธฐ์ ๋ถ์ฑ ๊ฐ์, ๊ทธ๋ฆฌ๊ณ ๊ถ๊ทน์ ์ผ๋ก ๋ค์ํ ๊ตญ์ ์ฌ์ฉ์๋ฅผ ์ํ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง๋๋ค. ์ค๋๋ถํฐ ํ๋ก์ ํธ์ @use๋ฅผ ํตํฉํ๊ณ ์ง์ ํ ์ ์ธ์ ์คํ์ผ ์ข
์์ฑ์ ์ด์ ์ ๊ฒฝํํด ๋ณด์ธ์.