SCSS(SASS) vs CSS

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