๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
CSS

Scss

by Youcodein 2022. 8. 18.
728x90
๋ฐ˜์‘ํ˜•

Scss

Sass(SCSS)๋Š” Syntactically Awesome StyleSheet์˜ ์•ฝ์–ด์ด๋ฉฐ ์ฝ”๋“œ์˜ ์žฌํ™œ์šฉ์„ฑ์„ ์˜ฌ๋ฆฌ๊ณ , ๊ฐ€๋…์„ฑ์„ ์˜ฌ๋ฆฌ๋Š” ๋“ฑ CSS์—์„œ ๋ณด์ด๋˜ ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ณ , ๊ฐœ๋ฐœ์˜ ํšจ์œจ์„ ์˜ฌ๋ฆฌ๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค.

์‚ฌ์šฉ ์ด์œ 

์ž‘์—…์ด ํฌ๊ณ  ๊ณ ๋„ํ™” ๋ ์ˆ˜๋ก CSS๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๋ถˆํŽธํ•จ์ด ์ƒ๊น๋‹ˆ๋‹ค. ์ด์— SCSS์™€ Sass๋Š” CSS ์ž‘์—…์„ ์‰ฝ๊ฒŒ ํ•ด์ฃผ๋ฉฐ ๊ฐ€๋…์„ฑ๊ณผ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ์ฃผ์–ด ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ์ง€๊ฒŒ ๋„์™€์ค๋‹ˆ๋‹ค.

๋˜ํ•œ Sass๋Š”

๋ณ€์ˆ˜์˜ ์‚ฌ์šฉ
์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ˜๋ณต๋ฌธ
Import
Nesting
Mixin
Extend/Inheritance

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ๊ณผ ์œ ์šฉํ•œ ๋„๊ตฌ๋“ค์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

CSS์™€ ๋น„๊ตํ•˜์˜€์„ ๋•Œ Scss๋Š”
1. CSS๋ณด๋‹ค ์‹ฌํ”Œํ•œ ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ CSS๋ฅผ ๊ตฌ์กฐํ™”ํ•˜์—ฌ ํ‘œํ˜„ ๊ฐ€๋Šฅ.
2. ์Šคํ‚ฌ ๋ ˆ๋ฒจ์ด ๋‹ค๋ฅธ ํŒ€์›๋“ค๊ณผ์˜ ์ž‘์—… ์‹œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ๋ฌธ์˜ ์ˆ˜์ค€ ์ฐจ์ด๋ฅผ ํ‰์ค€ํ™” ๊ฐ€๋Šฅ.
3. CSS์—๋Š” ์กด์žฌํ•˜์ง€ ์•Š๋Š” Mixin ๋“ฑ์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•˜์—ฌ CSS ์œ ์ง€๋ณด์ˆ˜ ํŽธ์˜์„ฑ์„ ํฐ ํญ์œผ๋กœ ํ–ฅ์ƒ ๊ฐ€๋Šฅ.

์ด๋Ÿฌํ•œ ์žฅ์ ๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

์›น์—์„œ๋Š” CSS๋งŒ ์ธ์‹ํ•˜๊ธฐ ๋•Œ๋ฌธ์— Sass์™€ ๊ฐ™์€ ์ „์ฒ˜๋ฆฌ๊ธฐ ์–ธ์–ด๋Š” ์ง์ ‘ ๋™์ž‘๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์šฐ์„  ์ „์ฒ˜๋ฆฌ๊ธฐ ์–ธ์–ด ๋ฌธ๋ฒ•์œผ๋กœ ์ž‘์„ฑ(์ฝ”๋”ฉ)ํ•˜๊ณ , CSS๋กœ ์ปดํŒŒ์ผํ•ด์„œ ์›น์œผ๋กœ ๋™์ž‘์‹œ์ผœ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•

'CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

์ด๋ฏธ์ง€ ํ‘œํ˜„  (3) 2022.08.22
Scss๋กœ ๊ฐ•์•„์ง€ ๋งŒ๋“ค๊ธฐ  (7) 2022.08.18
๋ฏธ๋””์–ด ์ฟผ๋ฆฌ  (5) 2022.08.16
CSS ๊ธฐ๋ณธ ๊ทœ์น™  (4) 2022.08.15
01. ๋น„ํŠธ๋งต๊ณผ ๋ฒกํ„ฐ  (9) 2022.08.10

๋Œ“๊ธ€