[CSS] CSS 전처리를 위한 Sass

Sass는 CSS 프로세서입니다.

CSS만으로 작성한 코드는 복잡하고 관리가 어렵습니다.

Sass는 CSS의 방식은 그대로 적용하되, 기능을 추가하여 관리를 쉽기 해줍니다.

컴파일러를 돌리면 컴파일러가 Sass코드를 CSS 코드로 변환해줍니다.

그래서 Sass를 CSS Pre-processor라고 부릅니다.

 

Sass의 특징

1. 변수 제공

Sass에서 변수는 $ 달러 표시로 사용합니다.

 

2. 중첩 가능

nav ul li에 스타일을 추가하고 싶을 때

nav 안에 ul을 넣고 그 안에 li를 넣는 방법으로 중첩할 수 있습니다.

 

3. 연산자

 

4. partials, imports : 여러 파일에서 CSS를 쓸 수 있게 해주고 불러오게 해줍니다.

 

5. Mixins

재사용 가능한 코드 여러줄이 있는 변수라고 생각하면 됩니다.

@mixin clearfix {
코드;
}

nav {
  @inclue clearfix;
}

 

위와 같은 방식으로 사용할 수 있습니다.

믹신을 사용하면 중복을 피할 수 있다는 장점이 있습니다.

 

믹신 안에 인수를 $를 사용해 정의하여 사용할 수도 있습니다.

 

6. 함수

 

7. 확장

@extend %이름 을 사용하여 이미 정의된 내용을 다른 곳으로 확장할 수 있습니다.

 

8. Control directives

 

Sass에서 주석을 넣을 때는 // 표시로 넣을 수 있습니다.