SCSS 개념 (feat. SASS와 차이점)

사전 지식

CSS란

• Cascading Style Sheets
• W3C에서 1996년 도입한 것, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기로 탄생하게 됨
• 사용자에게 문서를 표시하는 방법을 지원하는 규칙 기반 언어, 웹 표준 기술 중 하나

CSS Preprocessor란

• EX) Sass, Scss, Less, Stylus
• CSS 전(예비)처리기, CSS가 동작하기 전에 사용하는 기능, (↔ 후처리기라는 개념도 존재함!)
• CSS가 고도화될 수록 커지는 불편함을 해결하면서도, 웹에서는 표준 CSS만 동작한다는 점에서 나온 방식
• 전처리기로 작성 → 웹에서 표준의 CSS로 컴파일 → 동작

SASS란?

• Sass는 Preprocessing으로 궁극적인 목적은 CSS의 결함을 보정하려는 것
• CSS의 복잡한 작업, 코드의 재활용성, 가독성으로 유지보수 활용성을 높여주는 언어
• Sass에는 CSS 전처리기라는 의미와 함께 문법적 의미가 내포되어 있음
• Syntactically Awesome Style Sheets의 의미와 Sass 고유한 문법을 의미

SCSS란!

• 위에서 설명한 Sass에 대한 설명을 그대로 가져와서 적용 가능
• Sass의 3버전에서 등장한 언어
• Sass를 CSS 친화적으로 사용하는 것, Sass와 기능상 동등한 역할 수행
  • 퍼블리셔에게 익숙한 css와 비슷한 구문, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스티일시트
  • Sass 기능을 지원하되, css와 거의 같은 문법으로 사용된다는 점에서 퍼블리셔들에게 각광받는 언어

SASS vs SCSS

SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입하면서, Sass 모든 기능을 지원하는 CSS의 상위집합

**{}와 ;의 유무**

// sass: 들여쓰기로 구분하며 ;사용안함

.list
	width: 100px
	li
		color: red
		&:last-child
			margin-right: 5px

// scss: {}로 구분하며 ;사용

.list {
	width: 100px;
	li {
		color: red;
		&:last-child {
			margin-right: 5px;
		}
	}
}

그 밖… Mixin 사용 방식 차이

• Mixins란(믹스인) 재사용 가능한 기능을 만드는 방식을 의미함

// sass: =나 +기호로 사용

=border-radius($radius)
	-webkit-border-radius: $radius
	border-radius: $radius

.box
	+border-radius(10px)

// scss: @mixin과 @include로 사용

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

.box {
	@include border-radius(10px);
}

주석

• 기존 CSS 주석은 /*…*/ 이지만, Sass와 Scss는 JavaScript처럼 두 가지 주석 사용 가능

// sass: 원래 sass 특성 상 {} 대신 라인을 맞추는데, 이것이 주석에도 적용되는 것

/* 컴파일되는
* 여러 줄
* 주석 */

// Error
/* 라인을 맞추지
* 않으면 에러가
	* 납니다 */

// scss: 각 줄에 * 없어도 문제 안됨, 따라서 기존 css와의 호환이 쉬운 것

/*
	컴파일 되는
	여러 줄 주석
*/

SCSS 컴파일

중첩(Nesting)

// scss

.section {
	width: 100%;
	.list {
		padding: 20px;
		li {
			float: left;
		}
	}
}

// Compiled to

.section {
	width: 100%;
}
.section .list {
	padding: 20px;
}
.section .list li {
	float: left;
}

---

레퍼런스

https://heropy.blog/2018/01/31/sass/