Sass, ๊ทธ๋์ ๋ฏธ๋ค๋์
จ๋์?
๊ฐ์ ํ๋๋ก ๊ฐ๋ณ๊ณ ๋น ๋ฅด๊ฒ ํ์ด๋ณด์ธ์!
[๊ฒ์ ์ต์ ํ๋ฅผ ์ํ ํ
์คํธ์
๋๋ค.]
ํ๋ฃจ 6๋ถ! ์, ํ, ์, ๋ชฉ, ๊ธ
๋จ ์ผ์ฃผ์ผ๋ง ์๊ฐ ๋ด์
๋
๋ฏธ๋ค๋ Sass๋ฅผ ํ์ด๋ณผ ์ ์๋
30๋ถ Sass ๊ฐ์ข์
๋๋ค!
HTML๊ณผ CSS๋ฅผ ๊ณต๋ถํ๊ณ ๋์,
ํ๋ก ํธ์๋(Front-End) ์น ํ๋ก์ ํธ๋ฅผ ์งํํ๋ค ๋ณด๋ฉด,
๋ณต์กํ ๊ตฌ์กฐ์ CSS ์ฝ๋๋ฅผ
์์ฑํ ์ผ์ด ํ์ฐ์ ์ผ๋ก ์๊น๋๋ค.
Sass๋ฅผ ์ฌ์ฉํ๋ฉด ๋ฐ๋ณต๋๋ ๊ตฌ์กฐ์ ํํ๋ค์ ๋ํด
์ข ๋ ํจ์จ์ ์ด๊ณ ์ฒด๊ณ์ ์ด๋ฉฐ ๊ฐ๋จํ๊ฒ
์คํ์ผ ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค
ํ์ง๋ง, ๋ค๋ฅธ ์ฝ๋ฉ ๊ณต๋ถํด์ผ ํ ๊ฒ๋ค๋ ๋ง์๋ฐ,
Sass๋ ๋ ์ธ์ ๊ณต๋ถํ ๊น์...? ใ
ใ
Sass๋ฅผ ์์ํ๊ธฐ์๋ ๋ฏ์ค๊ณ ,
๋ณต์กํด๋ณด์ด๊ณ , ์๊ฐ๋ ์์ด์
Sass๋ฅผ ๊ณต๋ถํ๊ธฐ์ ์ฃผ์ ํ๊ฒ ๋๋ค๋ฉด,
์ฌ๊ธฐ ์ ์ค์
จ์ต๋๋ค!!
Sass๊ฐ ๋ฌด์์ด๊ณ , ์ด๋ป๊ฒ, ์ด๋์ ์ฌ์ฉํด์ผ ํ๋์ง
๊ฐ๋ณ๊ณ Speedyํ๊ฒ ํ์ด๋ด
์๋ค!
๊ทธ๋์ ๋ท์ ์ผ๋ก ๋ฏธ๋ฃฌ Sass๋ฅผ ๋น ๋ฅธ ์๊ฐ๋ด์ ํ์ด๋ณด์ธ์!
์ฐพ์์ ๊ณต๋ถํ ์๊ฐ์ด ์์ด ๋ฏธ๋ค๋ Sass๋ฅผ
30๋ถ ๊ฐ์๋ฅผ ํตํด ๋น ๋ฅด๊ฒ ํ์ด๋ณด์ธ์!
Sass์ ์กฐ๊ธ์ ๊ฐ๊น์์ง๊ฒ ๋ ๊ฒ์
๋๋ค!
๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ฉด,
โ
Sass๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ์ด์ ๋ฅผ ์๊ฒ ๋๊ณ ,
โ
Sass๋ฅผ ์ฌ์ฉํ์ฌ CSS๋ฅผ ์์ฑํ ์ ์๊ณ ,
โ
์ค๋ช
ํ๋ ์ฝ๋๋ฅผ ๋ณด๋ฉฐ ๋ณต์กํ HTML์
์คํ์ผ์ ์ข ๋ ํจ์จ์ ์ผ๋ก ์ ์ฉํ ์ ์๊ฒ ๋ฉ๋๋ค.
[์ด๋ฐ ๋ด์ฉ์ ๋ฐฐ์ธ ์ ์์ด์]
โข ํ๊ฒฝ์ค์
โข ํ์ผ๊ด๋ฆฌ์ Nesting
โข ๋ณ์(Variable)
โข Mixin
โข Extend
โข ์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ๋ณต๋ฌธ, ํจ์
โป ๊ฐ์ ๋ด์ฉ์ด ์์ฝ๋ ๋
ธ์
(Notion) ํ์ด์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.