IT/CSS

SCSS(SASS) vs CSS

๋ฌด๋…ˆ 2022. 4. 23. 00:10

SCSS

๐Ÿ“Œ CSS์˜ ํ•œ๊ณ„

  • ์„ ํƒ์ž(Selector)๋ฅผ ๋งŒ๋“œ๋Š” ๊ด€์ ์—์„œ ๋ณผ ๋•Œ ๋ถˆํ•„์š”ํ•œ ๋ถ€๋ชจ ์š”์†Œ ์„ ํƒ์ž๋ฅผ ๋งค๋ฒˆ ์ ์–ด์•ผ ํ•œ๋‹ค.
  • ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๋Š” ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ์—๋„ ์ผ์›ํ™”๋œ ์ž๋™ํ™”๊ฐ€ ์–ด๋ ต๊ณ  ์ˆ˜๋™์œผ๋กœ ๋ชจ๋“  ๊ฒƒ๋“ค์„ ์ˆ˜์ • ๋ณ€๊ฒฝํ•ด์•ผ ํ•œ๋‹ค.

๐Ÿ“Œ SCSS(SASS)์˜ ์žฅ, ๋‹จ์ 

  • ์„ ํƒ์ž์˜ ์ค‘์ฒฉ(Nesting)์„ ํ†ตํ•ด ๋ฐ˜๋ณต๋˜๋Š” ๋ถ€๋ชจ ์š”์†Œ ์‚ฌ์šฉ์„ ํ˜„์ €ํ•˜๊ฒŒ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ณ€์ˆ˜(Variable)๋ฅผ ์‚ฌ์šฉํ•ด์„œ CSS ์†์„ฑ๊ณผ ๊ฐ’์„ ์ผ์›ํ™”๋œ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ์„ ์‚ฌ์šฉํ•ด์„œ ๋™์ ์ธ CSS ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • SCSS(SASS)๋Š” CSS๋กœ ์ปดํŒŒ์ผ(Complie) ๊ฑฐ์ณ์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ๋‹ค.
    • ํ•˜์ง€๋งŒ ๊ฑฐ์˜ ์œ ์ผํ•œ ๋‹จ์ ์ธ ์ปดํŒŒ์ผ์„ ๊ฑฐ์ณ์•ผ ํ•˜๋Š” ๋ฌธ์ œ์ ์„ extension์œผ๋กœ ์‰ฝ๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ํด๋ž˜์Šค ๋ช…์„ ๋ณ€๊ฒฝํ•  ๊ฒฝ์šฐ SCSS์˜ ๊ฒฝ์šฐ. frame์„ ํ•œ ๋ฒˆ๋งŒ ๋ณ€๊ฒฝํ•˜๋ฉด ๋˜์ง€๋งŒ, CSS์˜ ๊ฒฝ์šฐ. frame์ด ๋“ค์–ด๊ฐ„ ๋ชจ๋“  ์„ ํƒ์ž๋ฅผ ์ฐพ์•„๊ฐ€์„œ ๋ณ€๊ฒฝํ•ด์ค˜์•ผ ํ•œ๋‹ค.
 // .scss

.frame {
	padding: 20px;
	.items {
		font-weight: bold;
		color: crimson;
		.item {
			margin: 10px;
			font-size: 18px;
			border: 1px solid #000;
		}
	}
}

 

// .css

.frame {
	padding: 20px;
}

.frame .items {
	font-weight: bold;
	color: crimson;
}

.frame .items .item {
	margin: 10px;
	font-size: 18px;
	border: 1p sold #000;
}

๐Ÿ“Œ SCSS์™€ SASS์˜ ์ฐจ์ด์ 

  • SASS: Syntatically Awesome Style Sheets
  • SCSS: Sassy Cascading Style Sheets
  • SASS๊ฐ€ ๋จผ์ € ์ƒ๊ฒจ๋‚ฌ๊ณ  ๋‚˜์ค‘์— SCSS๊ฐ€ ์ƒ๊ฒจ๋‚ฌ๋‹ค. ๊ทธ๋ฆฌ๊ณ  SASS์™€ SCSS๋Š” ์„œ๋กœ ์™„๋ฒฝํ•˜๊ฒŒ ํ˜ธํ™˜๋œ๋‹ค.(์ตœ๊ทผ์—๋Š” ์ฃผ๋กœ SCSS๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค)
  • {}(์ค‘๊ด„ํ˜ธ)์™€ ;(์„ธ๋ฏธ์ฝœ๋ก )์˜ ์œ ๋ฌด์— ๋”ฐ๋ฅธ ์‚ฌ์šฉ ๋ฐฉ์‹์ด ์•„์ฃผ ์กฐ๊ธˆ ๋‹ค๋ฅด๋‹ค.
  • SASS๋Š” ์ค‘๊ด„ํ˜ธ์™€ ์„ธ๋ฏธ์ฝœ๋ก ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ , SCSS๋Š” ์ค‘๊ด„ํ˜ธ์™€ ์„ธ๋ฏธ์ฝœ๋ก ์„ ์‚ฌ์šฉํ•œ๋‹ค.
    • ๊ทธ๋ž˜์„œ SCSS๊ฐ€ CSS์™€ ๊ฐ™์€ ๋ฐฉ์‹์ด๋ผ ์‚ฌ์šฉ ๋ฐ ์ดํ•ดํ•˜๊ธฐ ๋” ์‰ฝ๋‹ค.
  • ํŒŒ์ผ ํ™•์žฅ์ž๋Š” SASS๋Š” .sass์ด๊ณ , SCSS๋Š” .scss์ด๋‹ค.
  • ์žฌ์‚ฌ์šฉ ๊ธฐ๋Šฅ์„ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์ธ ๋ฏน์Šค์ธ(Mixins)์—์„œ ๊ฑฐ์˜ ์œ ์ผํ•œ ์ฐจ์ด๊ฐ€ ๋‚œ๋‹ค.
 // .scss

.frame {
	padding: 20px;
	.items {
		font-weight: bold;
		color: crimson;
		.item {
			margin: 10px;
			font-size: 18px;
			border: 1px solid #000;
			&:hover {
				background-color: blue;
			}
		}
	}
}

 

// .sass

.frame 
	padding: 20px
	.items 
		font-weight: bold
		color: crimson
		.item 
			margin: 10px
			font-size: 18px
			border: 1px solid #000
			&:hover 
				background-color: blue
๋ฐ˜์‘ํ˜•