SASS의 작동과정, 기본 개념 | CSS를 언어화

CSS를 언어화하여 사용할 수 있다

CSS를 사용하다가, SCSS를 알게되었다. 리액트로 링크드인 클론을 만들다가, SCSS를 자꾸 사용하길래, 한 번 익혀봐야겠다는 생각을 하게 되서, 기본 요소들을 정리하게 되었다. 

 

SCSS를 배우려고, 2시간, 3시간 들일 필요는 없는 것 같고, 기본 문법만 알면 되는 것 같다. 우선은 SASS는 CSS를 언어처럼 사용할 수 있게 해주는 것이다. 변수, 함수가 존재하듯이, CSS에서 변수, 함수를 정의해서 사용할 수 있게 해주는 것이 SASS다. 이 때 SASS를 브라우저 상에서 바로 사용할 수 없기 때문에 컴파일을 해주어야 한다.

 

SASS를 사용하게 되면, 다른 언어를 사용할 때와 마찬가지로 변수, 함수가 존재한다. $로 변수를 정의하고, mixin과 include로 함수를 정의해서 사용하면 된다. 이 때 다른 클래스의 속성을 expand로 상속해서 사용할 수도 있고, 다른 파일에서 쓰인 속성을 import해서 사용할 수 있다. 추가적으로 Nesting이라는 개념이 존재하는데, 기존에는 자식 태그의 속성을 정의하기 위해 부모 속성까지 같이 적어서 정의했다면, 이제는 중괄호 내에 들여쓰기로 속성을 정의할 수 있다.