[CSS] SASS 그리고 SCSS

1.  정의

CSS (Cascading Style Sheet)

SASS (Syntatically Awesome Style Sheets)
SCSS (Sassy Cascated Style Sheets)

 

: 처음에 축약어 뜻 보고 잘못된 정보인 줄 알았습니다. ㅋㅋㅋ Awesome, Sassy 등이 이름으로 들어가는게 아, 공식이름이 아닌가? 했는데 맞았네요. 새 스크립트에 대한 애정과 유머가 느껴져서 좋았습니다.

 

 

2. 비교

SASS와 SCSS가 CSS를 보완해서 변수나 함수 사용, 중첩 관계, 믹스인 설정 등을 한다는 것 정도만 알고 있었습니다.

CSS보다 많은 기능을 하니 배우고자 하는데, 그런데 SASS와 SCSS의 차이에 대해서는 모르고 있었습니다.

어떤 것을 익히는 게 좋을 지 결정하기 위해, 차이점을 인지하고 정리해보고자 여러 가지 사이트의 설명을 읽어보았습니다.

 

(1) 

https://www.geeksforgeeks.org/what-is-the-difference-between-scss-and-sass/?ref=rp 

What is the difference between SCSS and SASS ? - GeeksforGeeks

 

 

: SASS, SCSS 모두 CSS로 컴파일, 해석되는 전처리 스크립팅언어입니다.

: SASS는 코드 원문이 필요할 때 사용합니다. SCSS는 코드 구문이 필요하지 않습니다. ( 무슨 말일까요. )

: SASS는 엄격한 들여쓰기를 필요로 합니다. SCSS는 들여쓰기에 민감하지 않습니다.

: SASS는 공백과 세미콜론에 느슨한 편입니다. 반면, SCSS는 CSS와 더 닮아 있어서 공백과 세미콜론, 괄호에 예민합니다.

: SASS가 SCSS보다 더 큰 규모의 개발자 커뮤니티를 가지고 있습니다. (이게 사실 중요하지요..)

: SASS는 CSS로 사용될 수 없습니다. 반대도 마찬가지고요. 반면에, SCSS는 가능합니다. (오!)
: SASS는 기존 CSS에 편입되거나 뭔가를 더하기 어렵습니다. 하지만 SCSS는 새로운 코드를 넣는 것이 가능합니다.

: SASS는 파일확장자명이 .sass 입니다. SCSS는 .scss 입니다.

 

 

그..~렇게 안 와닿아서 다른 아티클도 정리해보았습니다.

아래 링크가 더 자세한 정보를 담고 있었습니다.

 

 

 

 

(2)

https://www.educba.com/sass-vs-scss/

SASS vs SCSS | Find Out The 9 Useful Differences

 

 

1. SASS는 CSS의 확장버전 느낌, CSS에 중첩, 상속, 믹스인 등을 더한 것이다. SCSS는 더 CSS와 닮아있는데, SASS와 CSS 사이의 간극을 채우고자 했기 때문이다.

2. SASS는 사용하기에 더 쉽고 간결한 구문을 가지고 있다. 규칙에도 덜 엄격한 편이다. 반면, SCSS는 CSS와 완전히 호환되는 측면이 있어 좋다.

3. SASS는 공식 문서가 잘 되어 있고 잘 정립되어 있다. SCSS는 코드 개발을 배우기에 더 쉽다.

4. SASS는 Javascript에 기반을 두고 있다.그래서 다양한 언어 확장을 지원하는 편이다. 그래서 자체 구문, 오픈소스 css전처리 프로세서, 라이브러리 등 고급 기술이 많다.

5. SASS가 기존 CSS파일과 통합되기 더 어렵다. SCSS는 더 쉽다.

6. SASS가 코드 작성, 배우기가 더 쉽다. SCSS는 더 논리적이고 복잡한 형태이다. 

7. SASS는 변수가 $사인으로 시작한다. 반면, SCSS는 더 모듈러 형태를 띄고 있어 주석 느낌으로 다가온다.

8. SASS는 .sass인 파일만 허용, SCSS는 CSS파일도 대부분 허용

9. SASS는 Ruby와 많이 닮아 있고 SCSS는 CSS와 많이 닮아 있다.

10. SASS는 지역 변수, 전역 변수 등이 파일의 서로 다른 위치에서 사용되고, SCSS는 색상 변수등의 변수가 있다.

11. SASS는 HTML에서 사용될 CSS 중첩 기능들을 가지고 있다. 또한 긴 계층 구조를 가지는 것이 어렵다. 반면, SCSS는 복잡한 클래스, 중첩 관계를 표현하기 좋다.

12. SASS는 색상, 속성, 변수 리스트에 대해서 조작이 CSS보다 더 좋다. 반면, SCSS는 마진, 패딩, 리스트 스타일, 디스플레이에 대한 조작이 있다.

13. SCSS는 제어 명령, 함수 명령, 믹스인을 가지고 있으며 확장 가능한 기능을 가지고 있는 반면 SCSS는 CSS 유사 기능을 나타내기 위해 SASS와 함께 사용될 수 있다.

14. 초기 개발 이후, SSS는 SassScript로 확장되었다. 크로스 플랫폼 운영 체제를 지원한다. CSS, LESS, YAML 등의 영향을 받았다. 이 SASS의 파일 확장자의 종류는 .scss와 .sass이며, 공식 구현체 또한 루비를 사용하여 개발된 오픈 소스 프로젝트이다.

 

 

 

---

 

 

3. 짧디 짧은 사견

 

SASS가  더 오피셜하고 잘 정립된 스크립팅 언어이고 커뮤니티도 크기에 제대로 배운다면 더 효율이 좋을 것 같고, SCSS는 CSS 친화적이어서 CSS와의 호환성을 우선시한다면 이 쪽을 사용하면 좋을 것 같다는 생각이 들었습니다.

 

저는 우선 SCSS를 먼저 공부해볼 것 같습니다.