[Sass/SCSS] SaSS와 SCSS의 개념과 차이, 기본적인 사용

이미지는 Sass 공식 사이트에서 가져왔다.

얼마 전에 블로그 포스팅 스터디에 참가했다. 무엇을 포스팅해볼까 고민하다가, 일전에 파일 수가 많은 프로젝트를 하면서 다수의 CSS파일 관리에 애먹었던 일이 생각이 나 이번 기회에 SCSS를 공부하기로 했다.

 

개념자체를 애매하게 알고 있었기도 하지만, 얼핏 Sass와 SCSS중에 후자를 더 많이 쓴다고 들었던 것 같아서 SCSS를 먼저 찾아보기로 했다. 그런데 검색해보니, SCSS는 마땅한 공식 사이트 같은게 안보이고 Sass만 검색결과에 나왔다. 왜 그런가 하고 봤더니...

 

📖 Sass, SCSS?

알고보니 Sass가 Sass와 SCSS 둘 모두를 통칭하는 말이였다. 

기본적으로 둘 다 CSS의 확장 언어로, 일부 차이가 있으나 문법이 거의 비슷하다. 

- Sass: Syntactically Awesome Style Sheets

중괄호 { } 와 세미콜론 ; 을 쓰지 않고 파이썬처럼 들여쓰기 레벨을 통해 내용을 구분한다. 

- SCSS: Sassy Cascading Style Sheets

말그대로 Sass+CSS. Sass가 업그레이드 되면서 나중에 새로 나온 문법이다. 기존의 CSS처럼 중괄호를 사용한다. 

 

Sass는 들여쓰기 레벨로 문법 구분을 하다보니 공백에 따라 컴파일 에러가 발생하는 등... 여러 이슈가 있어 Sass보다는 SCSS의 사용을 권장하는 추세이다. 

 

📖 CSS와 어떻게 다를까?

- 선택자 중첩. 중괄호 안에 중괄호가 된다!

- 변수와 연산자의 사용. CSS에서도 조금 되긴 하지만, 쓰기 편한 간단한 형태가 되었다.

- 조건문이나 반복문 등 프로그래밍 언어에서 일반적으로 지원하는 기능을 사용할 수 있다. CSS에서 일일히 노가다했던 기억을 떠올려보면 정말 감격스러운 발전이다. 

- 그외에도 여러 가지 추가 기능이 있는데... 이건 추후 알아보도록 하자. 

- 다만 확장자가 .css파일이 아니기 때문에 실제로 사용하기 위해서는 컴파일 과정을 거쳐야 한다. 번거로울 수는 있지만 지금은 세팅을 쉽게 할 수 있는 방법들이 나와 있어서 큰 문제까진 아니다. 

 

📖 VSCode에서 사용하기

그 컴파일 세팅을 어떻게 하느냐. (여기서는 VSCode를 사용한다는 가정하에 얘기한다.)

VSCode 익스텐션 검색창에 sass를 치면 여러가지 도구들이 나오는데, 그중에서 아래 둘 정도만 설치하면 충분히 사용할 수 있다.

1. Live Sass Complier: 파일 저장 시 라이브로 바로 컴파일을 진행해준다. 익스텐션 설치 후 추가 환경설정이 필요한데, 기존에 Settings.json파일을 써봤다면 어렵지 않게 할 수 있다. 자세한 건 익스텐션 설명 문서의 Settings 부분을 읽어보도록 하자. 설정까지 다 했다면, VSCode 아래쪽에 Watch Sass를 클릭해서 기능을 활성화시킬 수 있다. 

 .scss 확장자로 내용을 작성 후 컴파일을 마치면

 

짜잔.

사진처럼 컴파일된 css파일이 나온다. 스타일을 적용할 html 파일에는 변환된 css파일을 연결해주면 된다.  

 

2. Sass: 이건 문법 하이라이팅과 자동 완성을 도와주는 도구다. 편하게 코딩할 수 있게 도와준다.

 

📖 SCSS 기본 문법

어디까지나 CSS의 확장 문법이기 때문에, 기본적으로는 평소에 CSS 쓰듯이 작성하면 된다. 

여기서는 아주 기본적인 부분 몇 가지를 간단히 소개해본다. Sass 공식 사이트에서 CSS와 비교해 잘 알려주고 있으니 그쪽을 참고해서 살펴보면 좋다. 

 

1. 변수 사용

$변수명: 변수내용;

$point: green;
$error: rgb(255,0,0);​

이런 식으로 $만 앞에 붙여서 쓰면 된다.

2. 괄호 중첩 사용

section{
	padding: 10px;
	text-align: center;
    
    div{
    	margin: 5px;
    }
    span{
    	color: $point; //변수 사용
    }
    .main-title{
    	font-weight: 700;
    }
}

이런 식으로 중첩이 된다.
section 요소 안에 있는 div, span을 section > div 같은 방식으로 일일히 표기할 필요가 없다. 

3. 모듈 사용

CSS와 달리 확장자를 같이 쓸 필요가 없다. 

@use 'main';​

4. 믹스인(mixin)

CSS에는 없던 추가 기능. 여러 줄의 코드를 묶어서 정의 후 가져다 쓸 수 있다. 쉽게 말해 재활용.
@mixin으로 선언하고, @include로 불러온다.

@mixin textMixin{
      font-size: 15px;
      font-family: sans-serif;
      color: #000;
}

//변수를 넣을 수 있다.
@mixin bgTheme($theme: dark){
      background-color: #353535;
      color: #fff;
}
@mixin bgTheme($theme: light){
      background-color: #fff;
      color: #000;
}

.paragraph{
      @include textMixin;
}
.container.dark{
      @include bgTheme($theme: dark);
}

5. 연산자 사용

기존의 calc(). 사칙연산이나 논리 연산 등을 사용할 수 있다. 
나눗셈을 할 때는 반드시 괄호로 묶어줘야 연산이 된다. 
추가로 math 내장모듈을 불러오면 반올림이나 최대 최소값 등의 추가적인 연산자를 쓸 수 있다. 

section{
	width: (480px / 960px) * 50%; //나누기와 곱연산
}​

6. 확장(Extend)과 상속(Inheritance)

이것도 재사용을 위한 매커니즘이다.  
사용할 때 @extend를 써주면 된다. 

.btn {
	padding: 5px 10px;
    border-radius: 5px;
}

.btn-blue {
	@extend .btn;
	background-color: blue;
    color: #fff;
}
.btn-yellow {
	@extend .btn;
	background-color: yellow;
    color: #000;
}​

 

소개한 것 외에도 여러가지 CSS와의 차별점이 있지만, 나머진 더 써보고 익숙해지면서 천천히 포스팅해볼 예정이다.

 

---

같이 보기

- Sass 공식 페이지: https://sass-lang.com/