CSS, SASS, SCSS 차이 그리고 SCSS 사용해보기

CSS

---

웹 공부를 해보았다면 CSS를 모를 수가 없을 것 같습니다.

CSS(Cascading Style Sheets)란 HTML, XML 등으로 작성된 문서의 스타일을 구현하는 스타일 시트 언어입니다.

간단하게 정리하자면 HTML 문서를 꾸며주는 역할을 수행한다고 이해할 수 있습니다.

 

CSS의 문제점

---

CSS는 훌륭합니다. 우리가 이렇게 인터넷에서 다채로운 구조 및 색상들을 볼 수 있는 것도

CSS덕분이라고 해도 과언이 아닌 것 같습니다.

그렇다고 CSS에 문제가 없는 것은 아닙니다.

제가 처음 FrontEnd 분야가 재밌다고 느껴져서 공부를 시작했고 클론 코딩을 했었는데,

Static CSS 파일에만 코드만 500줄이 넘어가기 시작했었고,

여기서부터 내가 뭘 코딩하고 있었는지, 눈에 들어오지 않기 시작했었습니다.

 

CSS는 선택 자라는 문법을 지원해서 다양한 요소에 접근이 가능하게 해 줍니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

 

아래의 페이지에서 CSS 선택자를 재밌게 공부를 했던 기억이 있습니다.

https://flukeout.github.io/

 

아래의 구조는 한눈에 전체적인 구조를 파악하기에 어려움이 있었습니다.

특히 class 요소들이 묶이고 묶이다 보면 흐름을 잃어버리는 경우가 많았었고, 실수도 잦아졌었습니다.

그리고 특정 색상이 많이 사용될 때 이를 일일이 16진수를 찾아서 넣는 게 상당히 불편했었습니다.

500줄이 넘어가는 첫 프로젝트의 main css 파일......

SASS

---

이러한 문제점들을 해결할 수 있는 게 SASS입니다. 

SASS(Syntactically Awesome Style Sheets)는 CSS의 확장으로 나온 스크립트 언어입니다.

프로젝트가 커질수록 일반적인 CSS로는 관리하기가 힘들어지며,

복잡해지고 유지 보수하기도 힘들어집니다.

위의 단점들을 보완하기 위해 SASS라는 전처리기가 등장했습니다.

SASS는 PreProcessing을 통해 SASS로 작성된 언어를 CSS로 해석하고 컴파일해줍니다.

그래서 SASS로 코드를 작성하게 되면 이 코드를 CSS로 번역(?)해줍니다.

SASS는 CSS 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등…

표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.

 

물론 SASS 말고도 다른 전처리기들과 후처리기들이 존재하고는 있습니다만 각각의 장단점들도 존재합니다.

본인에게 맞는 언어를 선택하시면 되겠지만, 본문에서는 SCSS를 다루겠습니다

• LESS
• Stylus
• cssnext
• PostCss

 

SCSS

---

Sass(Syntactically Awesome Style Sheets)의 3 버전에서 새롭게 등장한 SCSS는

CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든

Sass의 모든 기능을 지원하는 CSS의 상위 집합(Superset)입니다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다.

 

간단한 차이는 중괄호와 세미콜론의 차이 유무입니다.

 

SASS에서는 선택자의 범위(Scope)를 tab으로 구분하는 반면에,

SCSS는 이를 {중괄호}로 구분합니다.

아무래도 중괄호를 쓰는 편이 좀 가시적인 편입니다.

 

이러한 차이 외에도 mixin의 부분에서도 차이가 존재하는데요, 이는 다음 포스팅에서 알아보겠습니다.

 

컴파일

---

SCSS는 웹에서 바로 작동시킬 수 없습니다.

웹은 CSS만 인식하기 때문에 전처리기로 작성한 후 CSS로 컴파일을 해야 합니다.

SassMeister

---

간단한 SCSS 코드는 아래의 페이지에서 간단하게 연습을 해보실 수 있습니다.

페이지에 접속한 후 SCSS 문법을 작성하면 바로 CSS 문법으로 변환이 됩니다.

SassMeister

SassMeister | The Sass Playground!

간단한 예시

Node로 설치 및 시작

---

먼저 node.js를 설치해야 합니다. 

node.js는 공식 홈페이지에서 다운로드하시거나

nvm을 설치하셔서 버전 관리에 용이하게 사용하시면 되겠습니다.

저는 아래의 버전을 Windows 환경에서 사용하고 있습니다.

또한 VSCode를 이용했습니다.

이제 본격적인 설치의 시간입니다.

빈 폴더에 먼저 project를 설치하겠습니다.

$ npm init -y

 

package.json 파일이 생성되면 뒤이어 node_modules와 서버를 위한 parcel-bundler를 설치해줍니다.

$ npm i -D parcel-bundler

그런 후 명령어를 입력하기 위해 package.json 파일에서 script 부분을 수정해주고

같은 디렉토리 내에서 index.html파일도 만들어줍니다.

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  }

SASS는 npm으로 전역으로 설치해서 사용합니다.

$ npm i -g sass

이제 HTML에 <link> 태그로 scss 파일만 연결하면 끝입니다.

<link rel="stylesheet" href="./main.scss">

main.scss에 간단하게 SCSS 문법을 작성하고 npm run dev 하시면

dist/ 에서 컴파일이 된 CSS 파일을 볼 수 있고,

http://localhost:1234 에 들어가서 적용상태를 볼 수 있습니다.

좌측 상단이 SCSS, 좌측 하단이 컴파일된 CSS, 우측은 서버에서 돌려본 예시

 

문법은 다음 포스팅에서 정리하겠습니다. 

감사합니다.