들어가며

Next.js를 사용하면서 Tailwind CSS를 사용했는데 불편한 사항이 이만저만이 아니였다. 나에게 익숙한 건 moudle css인데 Tailwind를 사용해 보니 처음엔 약어를 사용하여 인라인으로 css를 구현할 수 있어서 편하다고 생각했지만, 애니메이션 적용이나 복잡한 그림자 효과를 줄때도 tailwind.config.js파일에 등록하여 사용할 수 있다는게 가장 불편했다.

JAVASCRIPT
1/** @type {import('tailwindcss').Config} */
2module.exports = {
3  content: [ ... ],
4  theme: { 
5      keyframes: {
6        highlight: {
7          "0%, 100%": { backgroundColor: "rgba(229, 231, 235, 1)" }, // bg-gray-200
8          "50%": { backgroundColor: "rgba(229, 231, 235, 0.5)" },
9        },
10      }, 
11    }, 
12  plugins: [require("@tailwindcss/typography")],
13};

CSS-in-JS와 전처리기의 차이

CSS-in-JS란?

CSS-in-JS는 JavaScript를 사용하여 스타일을 정의하는 기법으로 Style이 JavaScript 파일 내부에 포함되어 컴포넌트와 밀접하게 결합된다.

Style을 컴포넌트 레벨에서 직접 적용할 수 있으며, 스타일의 범위를 컴포넌트에 한정시키고, 클래스 이름 충돌을 방지하는 등의 이점을 제공한다.

CSS-in-JS 라이브러리로는 Tailwind CSS, Styled-Components, Emotion 등이 있으며, JavaScript를 사용하여 스타일을 정의하고, 런타임에 CSS를 동적으로 생성한다.

CSS 전처리기란?

CSS의 전처리기 언어는 CSS를 보다 효율적으로 작성할 수 있도록 확장 기능을 제공하는 스크립팅 언어다. 개발자가 사용하기 쉬운 문법으로 스타일시트를 작성할 수 있게 하며, 이를 표준 CSS로 컴파일하여 웹 브라우저가 이해할 수 있는 형식으로 변환한다.

CSS 전처리기는 코드의 재사용성, 가독성, 유지 관리 용이성을 향상시키는 다양한 기능을 제공한다.

주요 CSS 전처리기로는 Sass (Syntactically Awesome Stylesheets), Less (Leaner Style Sheets), Stylus이 있다.

Sass는 가장 인기 있는 CSS 전처리기 중 하나로, SCSS (Sassy CSS)와 들여쓰기 기반의 오래된 문법 Sass를 지원한다. SCSS는 CSS와 거의 비슷한 문법을 가지고 있어 CSS 개발자가 쉽게 접근할 수 있다.
기능: 변수, 중첩 규칙, 믹스인, 함수, 상속 등
파일 확장자: .scss 또는 .sass

CSS 전처리기는 웹 개발의 생산성과 효율성을 높여주는 강력한 도구이지만, 최종 컴파일된 CSS의 크기와 성능을 고려하면서 사용해야 한다.

SCSS 사용 방법

1. SCSS 설치 및 설정

BASH
1npm install -g sass

2. SCSS 파일 작성

.scss 확장자를 사용하며, 작성 방법은 일반 CSS와 유사하고 SCSS의 추가 기능을 활용할 수 있다.

SCSS
1// variables.scss
2$primary-color: #333;
3
4// styles.scss
5@import "variables";
6
7body {
8  font-family: 'Helvetica', sans-serif;
9  color: $primary-color;
10}
11
12nav {
13  ul {
14    margin: 0;
15    padding: 0;
16    list-style: none;
17  } 
18}

3. SCSS 컴파일

SCSS 파일은 브라우저에서 직접 해석될 수 없으므로, 터미널에서 다음 명령어를 사용하여 SCSS 파일을 CSS로 컴파일할 수 있다.

input.scss는 SCSS 파일의 이름이고, output.css는 생성될 CSS 파일의 이름으로, 실시간으로 SCSS 파일의 변경사항을 감지하고 자동으로 CSS로 컴파일하려면 --watch 옵션을 사용할 수 있다:

BASH
1sass input.scss output.css

4. 컴파일된 CSS 사용

컴파일된 CSS 파일은 일반 CSS 파일처럼 HTML 문서에 포함시켜 사용할 수 있다.

HTML
1<link rel="stylesheet" href="output.css">

5. 추가 기능 활용

CSS의 기능을 확장하여 함수, 조건문, 반복문 등의 프로그래밍 언어의 기능들을 사용하여 보다 동적이고 유연한 스타일 시트를 작성할 수 있다.

SCSS
1// 함수 정의
2@function scale($size, $factor) {
3  @return $size * $factor;
4}
5
6$theme: "dark";
7
8body {
9// 함수 사용
10  font-size: scale(1rem, 1.2); // 1rem * 1.2 = 1.2rem
11
12// 조건문
13@if $theme == "dark" {
14    background-color: #333;
15    color: #fff;
16  } @else {
17    background-color: #fff;
18    color: #333;
19  }
20}
21
22// 반복문
23@for $i from 1 through 3 {
24  .item-#{$i} {
25    background-color: mix(#fff, #000, $i * 20%);
26  }
27}
28
29@mixin flex-center {
30  display: flex;
31  justify-content: center;
32  align-items: center;
33}
34
35.container {
36  @include flex-center;
37}

마무리

CSS의 전처리기 중 가장 인기가 많은 SCSS로 마이그레이션하면서 발생하는 에러나 기술에 대해 기록해가겠다.