sass를 사용하고나서 느낀점

sass는 css 전처리기의 한 종류입니다.

전처리기라는 말이 와닿지 않았고, css를 작성하기 전 사용해서 도움이 되는 처리기 정도로 받아들였습니다.

(sass 중에서도 scss를 기준으로 작성합니다)

 

 

웹 브라우저는 css 확장자밖에 해석하지 못하기 때문에, sass 파일로 작성하더라도 컴파일 과정을 거쳐 css 파일로 변경됩니다.



벌써 장점을 느꼈는데, 컴파일한다고 하였으니 컴파일 과정에서 error가 발생하게 됩니다.



css 작업을 하면 에러가 발생했을 때, 어디인지 찾거나 에러가 발생해야 되는 상황에서도 넘어가며 '왜 안되지'라는 생각을 많이 하곤 했는데,


error가 발생하면 컴파일 자체가 되지 않으니 에러 발견에 용이합니다.

또한 프로그래밍에서 사용되는 변수, 함수, 상속, 반복문 등의 개념을 적용할 수 있는데,



변수는 여기서 제외하고 싶습니다. 왜냐하면 css로도 var 키워드를 사용해서 변수를 만들 수 있었거든요



두 번째 장점은 nesting 중첩 및 상속입니다.



css 파일만으로 작성했을 때 선택자를 선택하는 과정에서 길어졌던 상황을 중첩을 통해 해결하였습니다.



중첩되는 선택자의 내용들은 접어둘 수도 있는 게 참 좋았습니다. (선택자를 짧게해서 선택자 체이닝에서 브라우저가 빠르게 찾을 수 있도록)

 

css를 구조화 시킬 수 있는 게 좋습니다



다만 가상 요소 선택자 처리 등은 헷갈리는 부분이 생기더군요(단점도 있죠)



프로그래밍적인 로직을 사용할 수 있다는 것도 좋았습니다. 반복문 등을 통해 변경사항을 적용하기 편하겠다 라는 점을 느꼈습니다.

 

mixin으로 버튼 등을 재사용하고 반복하지 않을 때 sass의 장점을 느낄 수 있었습니다.

 

 

 

장점 요약

1. 컴파일한다( 컴파일 단계 error 발생)

2. 상속(neting)

3. 프로그래밍 로직 사용 가능

 

 

+ 추가적으로 파일을 구분할 수 있다는 장점도 있습니다.

css파일을 나누게되면, 여러파일을 다운로드하기위한 HTTP 요청이 필요하나 sass파일로 분리하여 _~~로 import해오면

 

하나의 css파일로 변경되기때문에 분리할 수 있다는 장점이 있습니다.