[Browser] CSS, SCSS 뭐가 다를까?

프론트엔드 개발자(이하 FE 개발자)라면 Javascript, HTML, 특정 Library 외에도 친숙한 것이 있다.

바로 Style Sheet라 불리는 CSS다.

 

HTML에서 생성한 DOM 요소에 대해 이쁘게 꾸며주는 것이다.

 

FE 개발자들은 개발하다보면 CSS 말고 SCSS를 쓸 때가 오는데, 이 SCSS가 뭔지를 알아보도록 하겠다.

SCSS

• CSS를 편리하게 이용할 수 있도록 도와주며, 추가기능도 있는 CSS의 확장판 개념으로 이해하면 된다.

CSS로 작업을 진행하다 보면, 프로젝트 규모가 커지고 고도화 될 수록 CSS 코드가 비대해지고, 중복된 코드들도 많이 나오게 되며

한가지의 공통적인 색상을 수정하게 되면 전체 찾기를 이용해 모두 바꿔줘야하는 때가 온다.

DOM 요소가 많을 수록 많은 선택자(Selector)를 쓰기 때문에 코드의 가독성 또한 떨어지게 된다.

 

이를 보완하기 위해 SCSS가 나왔다.

SCSS는 위 말한 문제점들을 보완하기 위해 아래와 같은 기능들을 지원한다.

• 변수의 사용
• Mixin
• Import
• Function
• 조건문, 반복문
• CSS 구조화

이 외에도 더 있긴 하지만, 중요하게 쓰이는 것은 위 6개라고 생각이 들기 때문에 위에 적은 것들에 대해 중점적으로 설명하겠다.

 

변수의 사용

프로젝트를 진행하는데 #00fabe 라는 색깔을 시그니쳐 색깔로 사용한다고 했을 때, 이 색깔 코드를 변수에 담아 관리하면 여러개의 파일을 고치지 않고도 변수 하나만 바꿔주면 되니 코드의 유지보수성이 증가한다.

 

Mixin 사용

CSS가 공통적으로 들어가는 코드가 있다면, 이를 Mixin으로 바꿔서 사용할 수 있다.

(예를 들면 font-familly, font-size... 혹은 display: flex, flex-direction: ...)

 

Import

위 나온 내용들을 파일별로 관리하고 이를 공통 SCSS로 지정하여 다른 SCSS에서는 위 파일들을 Import하여 사용하면 모두 사용할 수 있다.

(나는 현재 "_variables.scss, _mixin.scss, ..." 이런식으로 파일을 관리하여 import를 하는 방식을 사용하고 있다.)

 

Function

특정 화면 크기에 대해 Viewport(vw) 값을 계산하기 위해서 계속 똑같은 식을 쓰거나, 매번 계산기를 쓴다면 코드 작성 효율이 떨어진다.

특정 화면 크기에 대해 Viewport 계산 로직을 Function으로 빼고 공통적으로 사용하면 관리도 쉬울 뿐더러 코드 작성 속도도 올라가게 된다.

 

조건문, 반복문

Function이나 Mixin에 대해서 특정 조건이 성립했을 때만 적용할 수 있다.(파라미터로 넘기면 된다.)

반복문을 사용하여서도 스타일을 지정할 수 있다.

 

CSS 구조화

기존 CSS코드와 SCSS코드를 비교해보자.

body {
	display: flex;
	flex-direction: column;
	width: 300px;
}

body .wrap {
	width: 100%
	display: flex;
	flex-direction: row;
}

위 코드가 CSS 코드다.

 

body {
    display: flex;
    flex-direction: column;
    width: 300px;
    
    .wrap {
        width: 150px;
        display: flex;
        flex-direction: row;
    }
}

위 코드는 SCSS를 적용한 코드다.

 

body 안에 있는 className wrap한테 지정한걸 한눈에 알 수 있다.