[Frontend Study] Day 1 - Sass(SCSS)란?

우선, Sass(SCSS)에 대해서 본격적으로 설명하기에 앞서, Sass(SCSS)가 왜 생겼는지를 살펴보자.

그러기 위해서는 CSS에 대해서 먼저 알아볼 필요가 있다.

 

 

CSS란?

---

 CSS의 특징과 사용할 때의 단점에 대해서 먼저 나열해보겠다.

 

 우선 CSS는 HTML에서는 지원할 수 없는 다양한 문자 크기나 글자체, 줄 간격의 지정이 가능할 뿐만 아니라 기존의 HTML 태그 기능을 확장하여 배경색상 등도 자유롭게 선택할 수 있다.

 

웹 문서는 HTML만으로 작성이 가능하지만, HTML만으로는 원하는 웹 형태를 띄울 수가 없다. 

 

 -> 따라서 CSS는 웹문서, ASP나 기타 CGI 등의 다양한 웹 관련 문서에 삽입해서 사용할 수 있으며, 단순화된 웹문서에 스타일을 지정해줄 수 있는 확장기능이다.

 

 CSS는 복잡한 언어는 아니지만 웹문서가 복잡하고, 코드가 많아질수록 불편함이 생긴다.

 

 예를들어, 선택자의 과용과 연산 기능의 한계, 구문의 부재 등 프로젝트가 커지면 코드의 중복이 많아지고, 복잡해지면서 유지보수가 힘들어진다는 단점이 따른다.

 

CSS의 단점을 정리해보겠다.

• 선택자를 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
• fuction같은 자동 기능이 없어서, 규모가 큰 프로젝트의 경우 자동화하기 어렵고, 모든 것을 수동으로 변경해야 한다.
• 결과적으로 중복되는 코드가 많아지면서 코드 줄수가 길어지고, 따라서 유지보수에 마이너스적인 요소가 된다. 

이 단점들을 보완하기 위해서 Sass(SCSS)가 나타났다.

 

Sass(SCSS)의 등장

---

 

 Sass(SCSS)는 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해서 등장한 CSS 전처리기 언어이다.

 

 하지만 Sass(SCSS)가 CSS의 대체 언어인 것은 아니다. 

Sass(SCSS)는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해서 사용하는 일종의 도구인 셈이다.

Sass(SCSS)가 제공하는 문법을 기반으로 코드를 작성한 다름, 이를 컴파일해서 CSS 파일을 빌드하는 것이 Sass(SCSS)를 통해서 스타일시트를 생산하는 방법이다.

 

 이렇게 Sass(SCSS)를 컴파일하면 CSS를 생산할 수 있다.

 

CSS와 비교되는 Sass(SCSS)의 장점을 정리해보겠다.

• CSS보다 간단한 표기법으로 CSS를 구조화하여 표현할 수 있다.
  • 즉, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
• CSS의 한계를 보완하기 위해서 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.
  • 변수의 사용
  • 조건문과 반복문
  • Import (모듈화)
  • Nesting (선택자를 반복하여 작성하는 것을 줄여줌.)
  • Mixin (함수)
  • Extend/Inheritance (확장/상속)
• 선택자의 중첩(Nesting)을 통해서 반복되는 부모요소 선택자 사용을 줄일 수 있다.
• 변수를 사용함으로써 CSS 속성값을 통일해서 관리할 수 있다.
• 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
• 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

Sass(SCSS)의 단점도 정리해보겠다.

• 전처리기를 위한 도구 필요
• 컴파일 시간 소요