SCSS(Sass)란?

한 기업에서 사전과제 전형을 진행하게 되었는데 과제조건 중 하나가 SCSS 스타일 작업이었다.
평소 CSS작업은 styled-components를 활용하고 있어 사실 SCSS는 사용해본적이 없었는데 이번에 좋은 기회라고 생각하여 SCSS를 공부해보려고 한다.

css는 문서의 스타일을 구현하는 스타일 시트 언어이다.
프로젝트가 커지고 코드가 많아질수록 유지보수가 어렵다는 불편함이 생길 수 있다.

1. selector를 만들때 매번 불필요한 부모요소의 선택자를 적어야 한다.
2. 코드 수동 변경 필요
3. 중복 코드 생성으로 인한 코드 길이 증가

Sass(SCSS)는 CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어이다.
결과적으로 코드의 재사용성을 올리고 가독성을 올릴 수 있다.
Sass는 CSS 전처리기라고 부르는데 css문법과 유사하지만 조건문, 반복문 등 표준 CSS보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.

작성 방법
Sass같은 전처리기 언어는 직접 동작시키는 것이 아닌 해당 언어 문법으로 코딩 후 CSS로 컴파일하여 웹으로 동작시키는 것이다.(js와 ts의 관계와 비슷할까?)
이 말은 즉 Sass는 CSS의 대체 언어가 아니라는 의미이다.
Sass는 CSS의 확장 전처리기 언어이고 CSS를 더 편리하게 코딩하기 위한 도구인 셈이라고 볼 수 있겠다 :)

아래 과정으로 동작한다.
1. Sass문법으로 코딩
2. 브라우저가 이를 컴파일하여 CSS파일을 빌드
3. Sass를 통해 스타일 시트를 생산

Sass와 SCSS는 다른 것인가?

둘은 같은 언어이지만 문법 생김이 다르다.

Sass
코드를 CSS로 해석하는 역할을 하는 전처리기이다.
Sass문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 CSS 파일을 만들어낼 수 있는 것이다 (이 작업을 컴파일이라고 한다).

파일을 생성할때 .sass로 작성해야 한다.

중괄호가 아닌 들여쓰기를 사용한다.

a 
	color:red
    text-size: 16px

mixin 문법(재사용 가능한 기능을 만드는 방식)
=로 선언하고 +로 적용시킨다.

SCSS
Sass의 3버전에서 등장한 언어이며 Sass의 불편함 개선과 csss와의 완전한 호환을 위해 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

기존 Sass보다 css문법에 더 가까워 익숙하게 작성할 수 있다는 것이 장점이다.

파일을 생성할때 .scss로 작성해야 한다.

// css와 같은 문법을 사용한다.
// 중괄호 {} 와 세미콜론 ; 을 사용한다.

a {
	color :red;
}
a:hover {
color: blue;

mixin 문법(재사용 가능한 기능을 만드는 방식)
@mixin으로 선언하고 @include로 적용시킨다.

그럼 Sass와 SCSS 중 어떤 것을 사용해야 할까?
SCSS에서는 모든 CSS라이브러리를 사용할 수 있고 기존 CSS 코드를 SCSS로 전환하는 작업이 어렵지 않기 때문에 추천한다.
또한 SCSS 사용자 수가 SASS보다 압도적으로 많으며 그 이유는 공식문법, 넓은 사용자, css 호환성, 여러 줄 쓰기 지원 등이 있다.

하지만 둘은 완전히 동일한 기능을 가지고 있기 때문에 개발자 마음에 따라서 원하는 것을 사용하면 된다.
나는 자바스크립트 구문 스타일에 익숙하기 때문에 SCSS가 훨씬 시각적으로 편리하다.