Sass๋ ๋ก์ปฌ์ ์ค์น๋๋ ๊ฐ๋ ฅํ ์ ์ฒ๋ฆฌ๊ธฐ๋ก ์๋ฆฌ ์ก์ผ๋ฉฐ ์ง๋ 10๋ ๋์ ์ ํ๋ก์ ํธ์ ํต์ฌ์ ์ด๋ฃจ์์ต๋๋ค. ์ด๋ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์์ ์ ์ธ CSS ํจํค์ง๋ฅผ ํจ์จ์ ์ผ๋ก ๊ตฌ์ฑํ ์ ์๊ฒ ํด ์ฃผ์์ต๋๋ค. ์ง๊ธ๋ Sass๋ ๊ต์ฅํ ๊ฐ๋ ฅํ ๋๊ตฌ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ์ง๋ง 2024๋ ์ ์ ์ด๋ค๋ฉด์ CSS๊ฐ ๊ธ์๋๋ก ๋ฐ์ ํ๊ณ ์๋ค๋ ๊ฒ์ ๋ถ์ธํ ์ ์๋ ์ฌ์ค์ ๋๋ค. ํ๋ Sass์๋ง ์กด์ฌํ๋ ๊ธฐ๋ฅ๋ค์ด ์ด์ ๋ CSS์ ๊ธฐ๋ณธ์ ์ผ๋ก ํตํฉ๋์์ผ๋ฉฐ, ๋ณ์ ๋ฟ๋ง ์๋๋ผ ํนํ ์ฃผ๋ชฉํ ์ต์ ๊ธฐ๋ฅ์ธ CSS ์ค์ฒฉ์ด ๊ทธ ์์ ๋๋ค.
:root {
--button-padding: 10px 20px;
--button-bg-color: #007bff;
--button-text-color: #ffffff;
--button-border-radius: 8px;
}
.button {
padding: var(--button-padding);
background-color: var(--button-bg-color);
color: var(--button-text-color);
border-radius: var(--button-border-radius);
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
๋ณ์ ์ ์๋ ์ค๋ซ๋์ SCSS์ ๋ ํนํ ๊ฐ์ ์ผ๋ก ์ฌ๊ฒจ์ก์ต๋๋ค. ์ด๋ ๋ง์ ์์ฑ์ ์ค์์์ ๊ด๋ฆฌํ ์ ์๋๋ก ํด์ฃผ๋ ๊ธฐ๋ฅ์ผ๋ก, CSS์์๋ ์ค๋ ์๊ฐ ์์ฌ์ด ๋ถ๋ถ์ด์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด์ ๋ CSS์์๋ Sass์ ์ ์ฌํ ๋ฐฉ์์ผ๋ก ๋ณ์๋ฅผ ์ ์ํ ์ ์์ต๋๋ค. ์ค์ํ ์ฐจ์ด์ ์ Sass ๋ณ์๋ ์ ์ฒ๋ฆฌ๊ธฐ ์ปจํ ์คํธ ๋ด์์๋ง ์กด์ฌํ์ง๋ง, CSS ๋ณ์๋ ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉ๋ ์ ์์ผ๋ฉฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋์ ์ผ๋ก ๋ฎ์ด์ธ ์๋ ์๋ค๋ ์ ์ ๋๋ค.
.blog {
position: relative;
padding: 1rem;
background: var(--neutral-100);
.blog-item {
border: 1px solid var(--neutral-200);
& span {
font-size: 1rem;
}
}
}
ํ๋์ ์์ ์์์ ๋ค๋ฅธ ์์์ ์คํ์ผ ๊ท์น์ ์ ์ํ ์ ์๋ ๊ธฐ๋ฅ์ CSS ์์ฑ์ ํฌ๊ฒ ๋จ์ํํฉ๋๋ค. ํ์ ์์๋ ๊ฐ์ ์ ํ์๋ฅผ ์ํด ๋์ผํ ์ ํ์๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉํ๋ ๋์ , ์ค์ฒฉ์ ํตํด ์ด๋ฅผ ์์ ์ ํ์ ๋ด์์ ๊ทธ๋ฃนํํ ์ ์์ต๋๋ค. ์ด ๊ธฐ์ ์ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋ช ํํ๊ณ ๊ณ์ธต์ ์ผ๋ก ๊ตฌ์กฐํํ๋ฉฐ, ๋ ํจ์จ์ ์ผ๋ก ๋ง๋ค์ด์ค๋๋ค.
CSS ์ค์ฒฉ๊ณผ ์ค์ฒฉ ์ ํ์๋ ๊ฐ๊ฐ 84%, 86% ์ด์์ ๋ธ๋ผ์ฐ์ ์ง์์ ๋ฐ๊ณ ์์ด ์ ์ ๋ ์ ๊ทผ์ฑ์ด ๋์์ง๊ณ ์์ต๋๋ค.
:is(selector1, selector2, selector3) {
/* styles */
}
:is
์์ฌ ํด๋์ค๋ ์ ํ์ ๊ฐ๋
์ ํ์ ์ ์ผ๋ก ๋ฐ๊พธ๋ฉฐ, ์ฌ๋ฌ ์ ํ์ ๋ฆฌ์คํธ๋ฅผ ๋ฐ์ ์ด๋ค ์ค ํ๋๋ผ๋ ์ผ์นํ๋ ๋ชจ๋ ์์๋ฅผ ์คํ์ผ๋ง ํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ DOM์์ ์์๋ฅผ ์ ํํ๊ณ ์คํ์ผ๋ง ํ๋ ๊ณผ์ ์ ํฌ๊ฒ ๋จ์ํํฉ๋๋ค.
๊ธด ์ ํ์ ๋ฆฌ์คํธ ๋์ :is()๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฐ๋ ์ฑ์ ๋์ด๋ฉด์ ๊ธด ์ ํ์ ์์ฑ๋ ํผํ ์ ์์ต๋๋ค.
.hero:has(.hero-button) {
background-color: var(--accent-50);
}
CSS ์์ฌ ํด๋์ค :has()
๋ ํ์ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ์ ํํ๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ์กฐ๊ฑด๋ถ ์คํ์ผ ์ ์ฉ๊ณผ ์ ์ฌํฉ๋๋ค.
.component {
--theme: dark;
container-name: fancy;
}
@container fancy style(--theme: dark) {
.fancy {
/* dark styles. */
}
}
.parent-container {
container-type: inline-size;
.headline {
font-size: 2rem;
}
@container (width >= 720px) {
.headline {
font-size: 2.5rem;
}
}
}
์ปจํ ์ด๋ ์ฟผ๋ฆฌ๋ CSS3 ์ดํ ์น ๋์์ธ์์ ๊ฐ์ฅ ์ค์ํ ํ์ ์ผ๋ก ํ๊ฐ๋ฐ๊ณ ์์ต๋๋ค. ์ด๋ ๋ฐ์ํ ๋์์ธ์ ๊ฐ๋ ์ ํ์ฅํ์ฌ ์์๊ฐ ์ปจํ ์ด๋์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์กฐ์ ๋ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ์์์ ๋์์ธ์ด ์ปจํ ์คํธ์ ๋ฐ๋ผ ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋ ์ ์๋๋ก ํ์ฌ ๋์ฑ ์ ์ฐํ๊ณ ์ ์๋ ฅ ์๋ ๋์์ธ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์ปจํ ์ด๋ fancy๊ฐ ๋ณ์ โtheme: dark๋ฅผ ๊ฐ์ง๊ณ ์๋ค๋ฉด, ์์ CSS๋ฅผ ์ถ๊ฐํฉ๋๋ค.
@layer utilities {
b .button {
padding: 0.5rem;
}
.button--lg {
padding: 0.8rem;
}
}
์บ์ค์ผ์ด๋ ๋ ์ด์ด๋ฅผ ์ฌ์ฉํ๋ฉด ํด๋์ค๋ ID ๋ฑ์ ์ค์ฒฉํ ํ์ ์์ด ์์ฒด ๊ณ์ธต(๋ ์ด์ด)์ ํ ๋นํด ๋ ๋์ ์ฐ์ ์์(specificity)๋ฅผ ํ๋ณดํ ์ ์์ต๋๋ค. @layer
๊ท์น๊ณผ ๊ณ์ธตํ๋ @import
๋ฅผ ์ฌ์ฉํด ๋ฆฌ์
๋ฐ ๊ธฐ๋ณธ๊ฐ๊ณผ ๊ฐ์ ๋ฎ์ ์ฐ์ ์์ ์คํ์ผ์์ ํ
๋ง, ํ๋ ์์ํฌ, ๋์์ธ ์์คํ
์ ๊ฑฐ์ณ ์ปดํฌ๋ํธ, ์ ํธ๋ฆฌํฐ, ์ค๋ฒ๋ผ์ด๋์ ๊ฐ์ ๋์ ์ฐ์ ์์ ์คํ์ผ๊น์ง ์์ฒด ์บ์ค์ผ์ด๋ ๋ ์ด์ด๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ ๋์ ์ ์ด๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
๊ทธ๋ ๋ค๋ฉด Sass๋ ์ด์ ํ์ ์์ด์ก์๊น์? ์ ํ ๊ทธ๋ ์ง ์์ต๋๋ค. ํฝ์ ์ rem์ผ๋ก ๋ณํํ๋ ํจ์์ ๋ฏน์ค์ธ(Mixins)์ Sass์ ๋์ฒด ๋ถ๊ฐ๋ฅํ ์ฅ์ ์ผ๋ก ๋จ์์์ต๋๋ค. ํ์ง๋ง ์ ๋ ๋๋ถ๋ถ์ ํ๋ก์ ํธ์์ Sass๋ฅผ ์ฌ์ฉํ์ง ์๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค. ๋์ Sublime Editor์์ ๋ฏธ๋ฆฌ ์ ์๋ ์ฝ๋ ๋ธ๋ก๊ณผ ํจํค์ง๋ฅผ ์ฌ์ฉํด ์ํฌํ๋ก๋ฅผ ํฌ๊ฒ ๊ฐ์ ํ์ต๋๋ค.
2024๋ ์์ ์์ ๋ณด๋ฉด, Sass๋ฅผ ์ค์นํ๊ณ ์ฌ์ฉํ๊ณ ์ปดํ์ผํ๋ ๊ณผ์ ์ ๋ฒ๊ฑฐ๋ก์์ ๊ฐ์ํ ๋งํ ์ด์ ์ด ๋ ์ด์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ์ต์ CSS์ ํ์ฅ์ฑ๊ณผ ์ฌ์ฉ ์นํ์ฑ์ ์ถ๊ฐ ๋๊ตฌ ์์ด๋ ์ถฉ๋ถํ ์์ ์ ์ํํ ์ ์๊ฒ ํด์ค๋๋ค.
์ ์ Themex ํ๋ก์ ํธ๋ ์๋ก์ด CSS ๊ธฐ๋ฅ์ ์กฐํฉ์ด ์ผ๋ง๋ ๊ฐ๋ ฅํ ์ ์๋์ง๋ฅผ ๋ณด์ฌ์ค๋๋ค.
CSS์ ๋ฐ์ ๊ณผ ํจ๊ป ํฌ๊ณ ์์ ํ๋ก์ ํธ๋ฅผ ์ง์ ์ ์ด๊ณ ๊ฐ๋จํ๊ฒ ๊ตฌํํ ์ ์๊ธฐ๋ฅผ ๊ธฐ๋ํฉ๋๋ค.
Sass, ์๋ ํ ๊ฐ์ธ์. ๊ณ ๋ง์ ์ต๋๋ค!
๐ ํ๊ตญ์ด๋ก ๋ ํ๋ฐํธ์๋ ์ํฐํด์ ๋น ๋ฅด๊ฒ ๋ฐ์๋ณด๊ณ ์ถ๋ค๋ฉด Korean FE Article(https://kofearticle.substack.com/)์ ๊ตฌ๋ ํด์ฃผ์ธ์!