오늘은 웹개발자를 준비했다면 많이 들어본 Sass 와 SCSS에 대해서 알아보자! 둘이 비슷한거 같은데 정확히 뭐가 뭔지 모르겠다면 글을 끝까지 읽어주시길..!
우선 Sass에 대해서 언급 하기 전에 CSS특징에 대해서 이야기 해보고 왜 Sass가 나오게 되었는지 이야기 해보자!
CSS는 HTML과 마찬가지로 누구나 배우기 쉬운 언어이다. 그렇게 설계되었기 때문이다. 처음부터 설계 의도가 "누구나 다 CSS를 만질 수 있게 하자!" 이었기 때문에 짧은 시간에 배워서 바로 웹 브라우저에서 시각적으로 확인할 수 있다. 하지만 CSS는 스타일 시트 규모가 점점 커질 수록 복잡해지고, 유지보수가 어려워진다는 큰 단점이 있다. CSS에서 동일한 코드를 재사용하기 위해서 할 수 있는 유일한 조치는 복사 붙여넣기 뿐이다. 극단적으로 기능만 다르고 디자인만 같은 버튼을 100개 만들어야 한다고 생각해보자. 같은 디자인임에도 불구하고 CSS에서 우리가 할 수 있는 것은 복사 붙여넣기로 코드를 늘리는 방법 밖에 없다. 만약 색을 모두 바꿔야 하는 일이 생긴다면? 폰트를 바꿔야하는 일이 생긴다면? 이후는 더 이상 생각하기도 싫을 것이다... 이러한 치명적인 문제점을 보완하기 위해서 Sass를 사용하게 되었다.
그럼 이제 Sass가 무엇인지에 대해서 알아보자.
1. Sass란?
Syntacically Awesome Stylesheets의 줄임말로 직역하면 '구문적으로 멋진 스타일시트'이다. Awesome은 감탄사에서만 많이 보던 표현인데 여기에 Awesome을 추가하면서 까지 강조한 이유는 CSS에서 더 나아가서 정말 멋진 기능을 제공하기 때문이 아닐까?
Sass의 정확한 뜻은 CSS로 컴파일 되는 스타일 시트 확장 언어이며 CSS * 전처리기의 하나로, 브라우저가 Sass를 직접 로딩하는 것이 아니라 개발은 Sass를 기반으로 한 후, CSS로 익스포트하는 과정을 거친다.
위에 말이 어렵다면 이것만 기억하자.
- CSS에서 존재하지 않는 다양한 기술을 Sass를 통해서 간단하게 작성할 수 있다.
- 코드를 작성하는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.
- Sass는 CSS의 대체 언어가 아니라, 확장 언어이다. (= CSS 코드를 생산해내기 위해 사용하는 도구일 뿐!)
- Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 만들어 내는 것이 Sass를 통해 스타일 시트를 생산해 내는 절차이다!
Sass는 CSS 코드를 생산해내기 위해서 사용하는 언어라는 것을 기억하면 된다. 이제 Sass와 SCSS가 무엇이 다른지에 대해서 알아보자
2. Sass와 SCSS의 차이점은?
Sass에 대해서 접해보았다면 SCSS에 대해서도 같이 접해봤을 것이다. 그러면 Sass는 뭐고, SCSS는 뭘까?
우선, Sass에는 두가지 의미가 있다.
(1) 코드를 CSS로 해석하는 역할을 하는 전처리기의 의미
(2) 문법으로써의 의미
이렇게 두가지로 해석할 수 있다.
Sass 문법을 기반으로 코드를 작성하면, Sass의 전처리기의 도움을 받아 CSS파일을 만들어 낼 수 있다.
그렇다면, SCSS는 무엇일까?
SCSS는 구문이다. SCSS문법을 기반으로 코드를 작성하면 Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS로 만들어낼 수 있다.
정리하자면 Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS 파일을 생성하는 것은 동일하다.
하지만 문법이 2개인 것이다 1. Sass 문법과 2. SCSS 문법이다.(또한, 다른 파일 확장자를 사용한다)
다음은 Sass 문법과 SCSS 문법의 예시이다.
//Sass
$font-stack: Helvetica, sans-serif
$primary-color : #333
body
font: 100% $font-stack
color: $primary-color//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;
body {
font: 100% $font-stack;
color: $primary-color;
}상단은 Sass 문법이고, 하단은 SCSS 문법이다. 둘이 같은 기능을 하지만 문법만 다른 것이다. 둘 중에 어느것을 써도 상관 없다.
본인이 편한 것을 사용하면 된다. 하지만, 보았을 때 SCSS가 더 친숙하다는 것을 느낄 수 있을 것이다. CSS와 동일하게 중괄호를 사용하는 방식이기 때문이다. 그렇기 때문에 일반적으로 SCSS를 사용한다.
Sass를 통해서 CSS에서도 변수 생성, 연산, 코드 재사용(mixin, extend), 조건문 반복문 함수 등을 사용할 수 있다. 이를 통해서 코드 재사용성을 높이고 유지보수를 쉽게 할 수 있다.
Sass 사용하면 다양한 기능을 비교적 쉽게 CSS 파일로 만들어 낼 수 있으니 복잡하고 큰 프로젝트를 준비할 때는 Awesome한 Sass를 한번 사용해보자!!
*전처리기란?
- 어떤 한 프로그램을 만들어야 할때, 우리는 소스를 짜고, 컴파일을 한후, 링크를 하게 됩니다. 이 전처리기(Preprocessor)라는 애는 소스를 짠뒤에 컴파일 하기 직전에 처리하는 컴파일러의 한 부분입니다.
'Study > CSS' 카테고리의 다른 글
| Float 정의 및 문제점 (9) | 2022.04.24 |
|---|