js로 이것저것 만들어보는 도중 css가 많아져 복잡하고 찾기 쉽지 않음을 부쩍 체감하는 요즘 이런 문제들을 보완하고자 새로운 언어를 배워보기로해서 sass(scss)를 도전하게 되었다.
SASS(Syntactically Awesome StyleSheets)
CSS의 단점을 보완하여 더 빠르고 효율적으로 스타일을 작성할 수 있는 구문을 위해 만든 CSS 전처리기이다.
전처리: 전처리기(Preprocessor)로 컴파일 전에 코드를 적정한 상태로 준비하거나 처리하는 일
컴파일: 컴파일러(Compiler) 가 고수준 언어를 저수준 언어로 나타내는 일 소스 프로그램을 목적(object) 프로그램으로 변환하는 작업이다. 즉, 우리가 c언어로 열심히 코딩한 내용을 어셈블리어로 바꿔준다.
어셈블: 어셈블러(Assembler)가 어셈블리어를 기계어로 바꿔주는 일 오브젝트 파일을 생성한다.
링크: 링커(Linker)가 여러 오브젝트 파일을 하나로 합치거나 라이브러리와 합치는 일 즉, 목적 프로그램을 라이브러리와 연결하여 실행 프로그램(.exe)을 작성한다. *라이브러리(library): 프로그래머들이 많이 사용하는 기능을 미리 작성해 놓은 것 ex) 입출력, 파일 처리, 수학 함수 등등
코드 처리과정코드 수행 과정 - https://miimee.tistory.com/211 프로그래밍 언어 - https://miimee.tistory.com/216
CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다.
다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.
비슷한 CSS 전처리기 언어로는 LESS, Stylus 등이 있다.
즉, css의 단점을 보완하기 위해 sass를 개발했고 sass는 개발된 언어로써 컴퓨터가 바로 이해하지 못해서 바로 알아들을 수 있도록 css로 변환해서 html에 불러온다는 것이고, 여기서 sass에서 css로 변환하는 과정을 컴파일, 그 과정에서 사용하는 것을 컴파일러라고 하는 것 복잡한 과정을 거친다고 보여지지만 간결하고 빠르게 코드를 작성할 수 있다는 이점 때문에 SASS를 사용하는 것
Sass구문에 맞는 코드를 작성 ▶ Sass 전처리기에 의해 CSS 코드로 변환 ▶ 변환을 마친 CSS 파일의 생성 ㅁㅁ
Sass와 SCSS의 차이
Sass 구문을 이용해서 코드를 작성하면, Sass 전처리기가 이를 CSS로 변환하게 된다. Sass 구문과 동일한 기능을 제공함과 동시에 좀 더 CSS 친화적인 구문인 SCSS라는 구문도 존재한다.
SCSS가 더 나중에 생겼고 { }_중괄호와 ;_세미콜론의 유무에 따른 사용방식이 미세하게 다르다. Sass는 중괄호와 세미콜론을 사용하지 않지만 SCSS는 사용하기 때문에 좀 더 기존의 CSS와 비슷하기 때문에 좀 더 이해가 쉽고 사용하기 좋다. (SCSS는 Sass의 하위 개념이고, 컴파일 과정이 필요한 것은 동일)
