[CSS] CSS Preprocessor - Sass | Sass란?

CSS 전처리기 Sass에 대해 알아보자

1. CSS Preprocessor(전처리기)

CSS는 배우기 아주 쉽지만 CSS로 개발을 하다보면 금세 지저분해지는 경우를 볼 수 있습니다. 예를 들어 같은 스타일을 적용해야 하는 요소들이 있다면 코드를 복사해서 붙여야하고, 수정이 필요할 때에는 일일이 찾아서 수정해야 하는 번거로움이 있습니다. 

이러한 문제점때문에 CSS 전처리기(Preprocessor)가 나오게 되었고, 이는 CSS가 동작하기 전에 미리 동작합니다. 

CSS 전처리기의 종류에는 대표적으로 Sass, Less, Stylus 가 있습니다. 

이번 포스팅은 Sass에 대해 알아보고, 간단한 기능들을 설명하도록 하겠습니다.

2. Scss?

Sass는 처음에 들여쓰기를 감지하여 그것을 중요한 핵심으로 여겨왔습니다. 하지만 이후 CSS와 Sass 사이의 차이를 좁히기 위해

Sassy CSS를 의미하는 SCSS라는 CSS에 친화적인 구문을 제공했습니다. 

그래서 현재 그 둘의 차이로는 들여쓰기 구문의 유무로, 무엇을 사용할지는 자신이 선호하는 쪽에 맞춰서 사용하면 됩니다. 

저는 CSS가 더욱 친숙하기 때문에 SCSS를 사용합니다.

3. 변수

변수를 사용할 때는 다음과 같은 조건에 충족이 되여야만 생성되야 합니다.

1. 값이 적어도 두 번 반복될 때

2. 값이 적어도 한 번은 수정될 가능성이 크다고 판단될 때

3. 우연에 의한 것이 아니라 값이 정해지는 것이 변수와 관련되어 있을 때

이와 같이 절대 수정이 되지 않거나, 오직 한군대에서만 사용할 스타일에는 변수를 선언해도 의미가 없습니다.

4. 선택자 내포

선택자 내포는 코드로 이해할 수 있습니다.

Sass 3.3 부터는 & 를 사용하여 고급 선택자를 생성하는 것이 가능합니다.

하지만 위와 같은 선택자 내포는 코드의 가독성을 어렵게 한다는 점에 한계가 있습니다. 

선택자가 길어지고, &를 더 자주 사용할 수록 더 어려워집니다. 그래서 예외의 상황이 아닌 경우에는 선택자 내포를 피해야 합니다.

1. 원래의 선택자 안에 가상요소를 포함하려고 선택자 내포를 쓰는 경우

2. 독립적인 상태 클래스를 사용할 때

5. 믹스인

믹스인은 Sass에서 가장 많이 사용되는 기능중에 하나입니다. 이 기능의 큰 장점으로는 재사용성이라고 할 수 있습니다.

이 기능을 사용하면 중복되는 스타일 요소들을 스타일 시트 내내 재사용 할 수 있습니다.

하지만 믹스인을 사용하였을때, 그 안에 기술된 내용이 과설계 되지 않아야 합니다. 도규먼트에서는 "만약 믹스인이 20줄을 넘어서게 되었다면, 더 작은 덩어리로 나뉘거나 완전히 수정되어야 합니다." 라고 적혀져 있듯이, 간결성을 유지 해야 합니다.

믹스인은 다음과 같이 사용합니다.

그리고 적용은 @include를 사용합니다.

위과 같이 믹스인을 적용하면 다음과 같이 컴파일 됩니다.

마무리

지금까지 Sass의 기본적인 기능들을 알아보았습니다. 위에서 설명한 기능들을 사용할 때에는 반드시 간결성을 생각해야 한다는것을 유의해야 합니다!!

감사합니다