Sass(SCSS) 적용하기

📝 개요

 

• CSS는 작업이 고도화 될수록 불필요한 선택자 과용, statement 부재 등 규모가 커질수록 불편함도 같이 커진다.
• JavaScript에서 작업하다가 React로 옮기면서 잘 적용되던 CSS가 제 역할을 못해서 내가 구성했던 화면들이 뭉개지는 결과를 확인할 수 있었다. 이를 해결하고자 SCSS 사용 방법에 대해서 알아보고자 한다.

 

🚀 목표

• SCSS를 작성하는 방법에 대해서 이해할 수 있다.
• SCSS 기본 문법을 숙지하고 실제로 적용할 수 있다.

 

---

 

Sass

CSS를 사용하다보면 내용이 쌓일수록 속성을 부여하더라도 적용되지 않는 순간이 온다. 코드가 길어지면 가독성이 떨어지고 유지보수의 어려움을 주는데 사람이 보고 작성하기에는 전혀 좋은 형태가 아님을 느낄 수 있다. 이 때 반복되는 내용은 줄여 재사용성을 올리고, 가독성을 올려 효율적으로 스타일시트를 관리할 수 있게 해주는 것이 바로 Syntactically Awesome Style Sheets, SASS이다.

 

SASS를 사용하면 아래와 같이 변수를 사용할 수 있다. 변수를 한 번 선언하면 여러 곳에서 재사용이 가능해진다. 이 외에도 수학 연산자 사용, Nesting 기능, @mixin 등 다양한 기능들을 사용할 수 있는데 차차 알아보도록 한다.

$color: #FAFAFA;

div {
	background-color: $color;
}

 

SASS와 SCSS

Sass 3버전에서 등장한 SCSS는 CSS구문과 완전히 호환되도록 구문을 도입하여 만든 Sass의 모든 기능을 지원하는 CSS이다. 눈에 확연히 보이는 차이는 중괄호({})와 세미콜론(;)의 유무이다.

 

Sass 설치하기

$ npm install sass

기존의 CSS와 달리 변수, Nesting, Mixin 등의 개념을 사용한 .scss파일을 올리면 브라우저는 이해할 수 없다. 그래서 우리가 작성한 .scss파일을 .css로 컴파일하기 위한 컴파일러를 설치해야한다.

 

설치 후 package.json에서 확인

 

---

 

Sass 문법 이해하기

sass 설치를 완료했으면 곧바로 .scss 파일을 생성하여 작성하면 된다. 그러면 지금부터 Sass에는 어떤 기능을 제공하고, 그 기능을 사용하기 위해서는 어떤 문법을 사용해야 하는지 살펴보자.

 

Variables

 

stylesheet에서 재사용하기를 원하는 colors, font stacks, 혹은 모든 CSS 값들을 변수에 담을 수 있다. Sass는 변수를 만들기 위해서는 $ 기호를 사용한다.

 

Nesting

Sass를 보면 ul과 li 선택자들이 nav 선택자 내부에 들어있음을 확인할 수 있다. 이는 CSS를 더욱 가독성 좋게 만들어준다.

Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, scss 파일에서도 최상위 요소 안쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 한다.

 

Mixins

 

@mixin(선언)과 @include(사용)는 항상 함께 사용되며 @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있다.

 

Partial

만약 .scss 파일 이름을 underscore(_)로 시작하면 CSS파일로 따로 컴파일되지 않는다. HTML에서 해당 CSS파일을 불러올 일이 없고 import만 되는 경우에 사용한다.

 

Extend / Inheritance

스타일을 모두 동일하게 가져야 하지만 부분적으로 다른 경우 다중 클래스를 사용하거나 공통으로 사용하는 속성을 모아서 선언했을 것이다. 이럴 때 @extend를 사용하면 편리하다. 하지만 @extend는 미디어쿼리에서 실행되지 않으므로 반응형 웹, 모바일 웹 작업에서는 사용하지 않는 것이 좋다.

sass에서 특정 선택자를 상속할 때 @extend 지시자 사용

 

Ex.1을 보면 %선택자를 볼 수 있다. 이는 placeholder selectors라고 하며 %를 사용하면 상속은 할 수 있지만 해당 선택자는 컴파일 되지 않는다.

 

import

좌측은 팀 프로젝트에서 공통으로 사용하는 내용들이 정의되어 있고, 우측은 내가 만들고 있는 로그인 화면에서 해당 내용을 가져오는 상황이다.

 

@import 문법을 사용하면 외부에 모듈화 해서 분리해 놓은 Sass 파일을 불러와 병합할 수 있다. 이 때 partial에서 underscore를 붙이면 CSS로 컴파일되지 않는다고 했다. underscore이 붙은 파일을 @import하면 파일 내용은 추가되지만 CSS로 컴파일되지 않아서 관리하기 편하다.

 

Parent Selector

& 기호를 사용하면 부모 선택자 기능을 사용할 수 있다. 중첩된 Sass 문법 내에서 사용하며 :hover, :checked, :not 등의 가상클래스와 :after, :before 등의 가상요소에 사용된다. 아래 예시 &는 부모인 button을 가리킨다.