💎 SaSS & SCSS 소개 & 설치 세팅 💯 총정리

...

CSS 와 Sass(SCSS)

Sass(SCSS)에 대해 얘기하기에 앞서, CSS에 대한 이야기를 짧게 해보자. 🤔

CSS의 단점

CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다.

예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다.

프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 주구장창 해야한다.

이 밖의 CSS의 단점을 열거하면 다음과 같다.

선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.
결국 중복되는 코드가 많아 코드 줄수가 길어져 유지보수에 마이너스적인 요소가 된다.

Sass(SCSS)의 등장

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

CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보면 된다.

CSS 전처리기(Preprocessor) 언어 란?

HTML, CSS를 깊게 다뤄본적이 있다면, Sass, Less, stylus 에 대해 한번쯤은 들어본 적이 있을 것이다.
이 친구들이 바로 CSS 전처리기 이다. (CSS Preprocessor 라고 부른다)
전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 된다.

* 어떻게 사용할까?
Sass, Less, Stylus 같은 전처리기 언어는 직접 동작시키는게 아니다.
웹은 CSS밖에 모르기 때문이다.
우선 전처리기 언어 문법으로 작성(코딩)하고, CSS로 컴파일해서 웹으로 동작시키는 것이다. (자바스크립트와 타입스크립트 관계라고 봐도 무방하다)

정리하자면, 전처리기 언어 즉, Sass는 CSS의 대체 언어가 아니다.
Sass는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.
Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차인 것이다.

Sass(SCSS)의 장점

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

Sass(SCSS)의 단점

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

Sass 와 SCSS

Sass에 처음 관심을 가지게 되면, Sass와 더불어 SCSS라는 용어를 함께 접하게 될 것이다.

그리고 위에서 강의를 이어나갔듯이 Saas(SCSS) 로 묶어서 설명하였는데 이 둘은 위와 같이 문법 생김새는 다르지만 사실 같은 파생 언어라고 봐도 무방하다.

Saas 란?

Sass라는 이름에는 사실 두 가지 의미가 담겨 있다.

하나는 코드를 CSS로 해석하는 역할을 하는 전처리기로써의 의미, 또 다른 하나는 문법(구문)으로써의 의미다.

Sass 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 CSS 파일을 만들어낼 수 있는 것이다(이 작업을 컴파일이라고 한다).

SCSS 란?

scss는 Sass의 3버전에서 등장한 언어이다.

자바나 php가 버젼이 있듯이 Saas도 시간이 지나면서 버젼업되며 불편한점이 개선되었고, 기존의 문법 방식이 너무 불편하고 익숙치 않아 퍼블리셔에게 익숙한 css와 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.

SCSS는 기존 Sass 구문에 비해 좀 더 CSS 코드와 유사한 형태를 띄고 있어 퍼블리셔들에게 가장 각광 받고 있는 전처리기 언어이다.

SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식

SCSS 문법을 기반으로 코드를 작성하면, Sass 전처리기의 도움을 받아 컴파일러가 이를 CSS로 빌드할 수 있다.

Sass 공식 레퍼런스 조차도 SASS보다 CSS와 더 비슷한 SCSS를 선호한다.

그리고 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 압도적으로 더 많다.

Sass vs SCSS 차이

확장자

둘은 엄연히 다른 파일이다. (*.scss / *.sass)

확장자에따라 Saas 문법으로 익힐지 SCSS 문법으로 익힐지 다르게 된다.

구문 스타일

Sass : 중괄호가 아닌 파이썬 같이 들여 쓰기를 사용
SCSS : CSS처럼 중괄호 { }와 세미콜론 ;을 사용

믹스인(mixin) 문법

추가로 더 한가지 차이점을 말해보자면 mixin (재사용 가능한 기능을 만드는 방식) 이 있다.

Sass의 경우 = 로 선언하고 + 로 적용시킨다.
SCSS의 경우 @mixin 으로 선언하고 @include 로 적용시킨다.

Sass 대신 SCSS로 쓰자

SCSS는 2010년 5월 버전 3으로 업그레이드하면서 갖춰진 새로운 문법 체계이다.

CSS 문법을 SCSS 문법 안에서 사용할 수 있으므로, CSS 핵과 IE의 filter와 같은 특정 브라우저 벤더용 문법도 포함하여 CSS가 지원하는 모든 문법과 기능을 SCSS에서 그대로 사용할 수 있다.

이런 완전 호환성 덕분에 모든 CSS 라이브러리를 그대로 이어서 사용할 수 있고, 기존 CSS를 SCSS로 전환하는 작업을 쉽게 시작할 수 있다.

따라서 전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많다.

공식 문법 : 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여준다.
더 넓은 사용자 : 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하는 등 새로운 문법이 더욱 널리 쓰인다.
CSS 호환성 : 친근한 CSS 문법은 Sass와 CSS 사이의 심리적 틈을 줄여주고, 기능적으로도 확장성을 높인다.
여러 줄 쓰기 지원 : Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에, 반대로 여러 줄 쓰기를 지원하지 않는다.

추가적으로 위에서 잠깐 소개한 less나 stylus 같은 다른 전처리기 언어보다도 scss가 더 뛰어나 전세계 에서 가장 많이 사용하는 전처리기 언어이다.

하지만, 사실 둘은 완전히 동일한 기능을 갖고 있기 때문에 어느 것을 사용할지는 순전히 여러분에게 달려 있다.

이것은 단지 시각적 취향의 문제라고 밖엔 할 수 없는데, 만일 파이썬 구문 스타일에 익숙하면 Sass를, 자바스크립트 구문 스타일에 익숙하면 scss를 쓰면 된다.

SCSS 설치 & 컴파일 방법

이게 SCSS 개념에 대해 탄탄히 배웠으니 SCSS 문법을 배우기 앞서 어떻게 SCSS를 설치하고 웹에서 사용할 수 있는지 알아보자.

앞서 말했듯이 Sass(SCSS) 코드 자체로는 웹에서 돌아가지 않는다.

웹에서는 css만 동작하기 때문에 C언어나 자바와 같이 Sass를 컴파일 해주어야 한다.

컴파일의 방법은 다음과 같이 다양하다.

SassMeister 사이트

따로 프로그램을 설치하는 것이 아닌 온라인에서 scss 컴파일을 적용시킬 수 있는 방법으로, Sass 버전 설정도 다양하게 할 수 있으며, 실시간 변환을 확인 할 수 있다.

빠르게 변환이 필요할때 유용히 사용 할수있다.

SassMeister | The Sass Playground!

SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...

www.sassmeister.com

node-sass

노드 터미널에서 scss 파일을 css로 컴파일 할 수 있다.

1. node.js 설치한다.

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

설치 후 Command Prompt 창에 다음과 같은 명령어를 넣으면, node.js 와 npm 이 설치되어있는지 확인할 수 있다.

> node -v
> npm -v
> npm list -g

2. node-sass 를 설치한다.

윈도우 검색 (단축키 : 윈도우키+s)으로 Node.js Command Prompt창을 열고

그리고 창에 아래 명령어를 입력하면 node-sass 모듈이 설치된다.

여기서 -g 는 global 설치를 말한다. 그러니 어느 폴더에서도 SASS 가 작동되게 설치를 하려면 -g를 붙여준다.

> npm install -g node-sass

> node-sass -v # 만일 오류발생 시, npm rebuild node-sass를 쳐보자

3. 터미널에서 컴파일 명령어를 입력한다

> node-sass [옵션] <인풋파일> <아웃풋파일>
> node-sass -w scss/style.scss css/style.css --output-style compressed

옵션으로 --watch or -w 를 입력해주면 파일을 감시하여 저장시 자동으로 변경 사항을 컴파일 한다

> node-sass --watch styles/common.scss styles/common.css

그 이외의 옵션들

-w, --watch 디렉토리 또는 파일 감시
-r, --recursive 재귀적으로 디렉토리나 파일을 감시합니다.
-o, --output 출력 디렉토리
-x, --omit-source-map-url 출력에서 소스 맵 URL 주석 생략
-i, --indented-syntax stdin의 데이터를 sass 코드로 처리(scss와 비교)
-q, --quiet 오류가 발생한 경우를 제외하고 로그 출력을 억제합니다.
-v, --version 버전 정보를 출력합니다.
--output-style CSS 출력 스타일(중첩 | 확장 | 압축 | 압축)
들여 쓰기 --indent - 입력 유형  에 대한 출력 CSS를 (공간 | 탭)
--indent-width 들여쓰기 너비 ; 공백 또는 탭 수(최대값: 10)
--linefeed 줄바꿈 스타일(cr | crlf | lf | lfcr)
--source-코멘트 디버그 정보 포함 에서 출력을
--source-map 소스 맵을 내 보냅니다.
--source-지도-내용 퍼가기는 내용을 포함 에서 지도를
--source-map-embed sourceMappingUrl을 데이터 URI로 포함
--source-map-root 기본 경로, 있는 그대로 소스 맵 에서 내 보냅니다.
보기에 --include 경로 경로 에 대한 가져온 파일
--follow 심볼릭 링크된 디렉토리를 따릅니다.
--precision 십진수에 허용 되는 정밀도의 양
--error-bell 오류 발생 시 벨 문자 출력
--importer 사용자 지정 가져오기 도구가 포함된 .js 파일의 경로
--functions 사용자 정의 함수가 포함된 .js 파일의 경로
--help 사용 정보 인쇄

VS Code 익스텐션 (Live Sass Compiler)

vscode에서 scss를 코딩하는데 도움이 되는 다음 확장 플러그인 들을 설치해준다.

Live Sass Compiler - Visual Studio Marketplace

Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime with live browser reload.

marketplace.visualstudio.com

scss-lint - Visual Studio Marketplace

Extension for Visual Studio Code - a scss-lint extension for vscode

marketplace.visualstudio.com

SCSS Formatter - Visual Studio Marketplace

Extension for Visual Studio Code - A Visual Studio Code Extension to format SCSS

marketplace.visualstudio.com

scss snippet - Visual Studio Marketplace

Extension for Visual Studio Code - An extension for fast coding of SCSS codes

marketplace.visualstudio.com

SCSS Scope Helper - Visual Studio Marketplace

Extension for Visual Studio Code - Add helpers next to the closing bracket of a scss block

marketplace.visualstudio.com

익스텐션 설치를 완료하고, .scss 파일을 하나 만들면, 편집기 하단 메뉴에 Watch Sass 아이콘이 생긴것을 볼 수 있다.

Watch Sass 항목을 누르면, Watching... 이라는 메세지와 함께, 같은 경로에 컴파일된 test.css와 test.css.map 파일이 생성된 것을 확인할 수 있다.

참고로 watch sass를 끄게되면 파일에 수정이 있어도 업데이트가 되지 않는다.

.map 파일이란?

scss를 컴파일 해보면 다음과 같이 .map 이라는 파일이 생긴걸 볼 수 있다.

우리는 css 본 파일만 필요하니 왜 생기나 싶어 어느 사이트는 이 .map파일을 지우는 과정을 소개하기도 하지만, 사실 이는 개발하는데 있어 굉장히 중요한 파일이다.

.map 파일은 말그대로 scss 와 css를 매핑 시켜주는 역할을 하는 파일이다.

아무리 뛰어난 전처리기 언어라고 해도, 기본적으로 css와 문법 스타일이 다르다.

보통 웹브라우저 개발자도구를 켜놓고 하나하나 미세한 수정을 할 텐데, 웹브라우저는 css밖에 모르니 통합된 css 파일을 보고 scss를 일일히 찾아가며 수정해줘야 되지만, 매핑이된 .map 파일이 있다면 아래 사진과 같이 브라우저에 아예 scss 파일 선택자를 띄워준다.

SCSS / CSS 폴더 분리

보통 프로젝트를 하면 css파일 말고 scss는 서버가 인식하지 못하는 파일이므로 서버에 올릴 필요가 없다.

그래서 설정에서 scss에서 컴파일된 css파일은 [css]폴더에 저장되게 처리를 하면 프로젝트 트리 구성을 정리하는데 도움이 된다.

setting.json을 열고 다음과 같이 항목을 추가해준다.

{
    "liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": 경로
    }
    ],
    "liveServer.settings.donotShowInfoMsg": true
}