Sass란?

 

Sass는 CSS 전처리기로써

CSS의 한계나 단점을 보완하기 위해 만들어진 CSS 확장 언어이다.

 

짧은 내용의 CSS일 경우엔 크게 문제가 없지만

방대한 양의 CSS를 다루게 되면 내용을 알아보는 것이 힘들어지고

가독성이 많이 떨어지기 때문에 Sass는 추가적인 기능을 통해 이러한 단점을 보완한다.

 

Sass의 기능 및 도구

1. 변수

2. 조건문, 반복문

3. Mixin

4. 연산자

5. Extend

6. Nesting

7. Import

 

※ 각 기능별 상세 내용은 추가로 포스팅 할 예정이다.

 

 

1. Sass의 설치

Sass는 두 가지 버전이 존재한다. LibSass와 Ruby Sass가 그 종류이다.

 

두 버전은 2014년도에 각 버전의 동기화에 합의했기 때문에 대부분의 호환성을 보장한다.

두 버전의 호환성 문제는 

http://sass-compatibility.github.io/ 페이지에서 확인이 가능하다.

 

호환성이 보장되기 때문에 두 버전중 본인의 개발환경에 맞춰서 알맞은 버전을 선택하면 된다.

Ruby 환경에서 개발을 한다면 Ruby Sass를, Node.js 환경에서 개발을 진행한다면

LibSass로 선택해서 사용하면 된다.

 

특별히 고려할 환경이 없다면 가장 보편적으로 사용하는 Ruby 버전으로 설치하면 되겠다.

 

2. Sass와 SCSS의 차이

Sass는 크게 두 가지 형태의 구문을 지원한다.

하나는 Sass, 또 하나는 SCSS이다.

 

Sass의 경우 중괄호와 세미콜론을 대신해 들여쓰기를 사용해 구문을 분리하고 작성한다.

 

그리고 SCSS의 경우 CSS와 굉장히 유사하게

중괄호와 세미콜론을 사용하는 문법이다.

 

각 문법별 작성 방법은 아래에서 살펴보도록 하겠다.

 

Sass의 확장자 : .sass

SCSS의 확장자 : .scss

/* Sass */
.main
   .side
      display:block
      text-align:center
      p
        color:#333
      a
        display:inline-block
        font-weight:bold


/* SCSS */
.main{
   .side{
      display:block; text-align:center;
      p{color:#333}
      a{display:inline-block; font-weight:bold;}
   }
}

위 처럼 각 문법의 사용이 다르다.

 

두 문법 중 주로 포스팅에 사용할 문법은 SCSS 문법이다.

그 이유는 SCSS 문법이 CSS와 더 높은 호환성을 보이고 가독성도 좋기 때문이다.

 

추가적으로 Sass 공식 레퍼런스에서도 SCSS문법을 기준(Sass 3.0 부터)으로 설명하고 있기 때문에

SCSS 문법을 위주로 사용할 예정이다.

 

3. CSS vs Sass 문법(SCSS)의 차이

/* CSS */
.main .side{display:block; text-align:center;}
.main .side p{color:#333;}
.main .side a{display:inline-block; font-weight:bold;}


/* SCSS */
.main{
   .side{
      display:block; text-align:center;
      p{color:#333}
      a{display:inline-block; font-weight:bold;}
   }
}

위의 예시를 통해 CSS, Sass 문법의 작성법과 차이점을 확인해보도록 하겠다.

 

앞서 얘기한 것과 같이 CSS는 .main이라는 클래스의 하위에 있는 .side, p, a에 스타일을 주기위해서

.main 클래스를 매번 작성을 해줘야한다.

 

이 방법은 번거로울뿐만 아니라 많은 뎁스를 타고 들어가게 되면 가독성이 상당히 떨어지게 된다.

/* CSS */ 
.main .side .dtl_inf .bt_area .dsc{font-size:11px;}
.main .side .dtl_inf .bt_area a{float:right;}
.main .side .dtl_inf .bt_area a strong{font-size:15px;}
.main .side .dtl_inf .bt_area a span{display:block;}

/* SCSS */
.main{
   .side{
      .dtl_inf{
         .bt_area{
            a{
              float:right;
              strong{font-size:15px;}
              span{display:block;}
            }
            .dsc{font-size:11px;}
         }
      }
   }
}

Sass문법의 경우 .main 클래스나 .side 클래스와 같이 공통의 부모 클래스의 경우

한 번만 작성을 해주면 하위에 있는 요소들은 그 안에서 제어가 가능하다.

 

이처럼 어떤 요소가 어느 부모 요소 안에 있는지를 단번에 확인이 가능하다.

 

 

---

참고

https://sass-lang.com/documentation 

https://poiemaweb.com/sass-basics