0. SCSS(SASS) 를 사용해보자! [준비]

CSS 를 매번 똑같이 정의하고, 반복하고, 복잡한 CSS 규칙에 하루종일 치덕여 살다가, SCSS 를 알게되었다.

 

SASS 를 사용하면 SCSS 구문을 사용하여, 어썸! 한 스타일 시트를 만들 수 있다.

 

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

SASS : Syntactically Awesome Style Sheets

SCSS : Sassy CSS

 

말그대로 어썸! 한 스타일 시트이자, 아주 쿨! 한 스타일 CSS 을 말한다.

 

무슨차이가 있나? 모르겠다.

 

SCSS가 SASS보다 나중에 나왔고,SCSS 는 SASS 보다 CSS의 구문과 비슷(아니 아주 똑같)하다.

 

그래서 SASS 를 install 할 경우, DOCS 에는, SASS 보다 SCSS 구문을 사용하라고 추천한다.

 

그래서 이게 뭐하는 도구인가?

 

SASS 는 CSS 로 변환해주는 컴파일러다.

 

기본 CSS 구문과 더불어, mixin, function, if, for 등을 사용할 수 있게 만들어주고,

무엇보다 중첩되어 있는 css 스타일을 만들 수 있어서 아주아주 보기도 편리하고, 사용하기도 편리하다.

 

예를들어, 

 

<div className={styles.NumberTest}>
	<h1 className={styles.NumberTest__title}>Number테스트</h1>
</div>

의 스타일을 지정한다하면

 

.NumberTest {
	...
}

.NumberTest__title{
	...
}

처럼 사용했겠지만,

 

SASS 와 함께라면

.NumberTest {
    font-size: 1rem;
    color: green;

    .NumberTest__title {
        color: red;
    }
}

혹은

.NumberTest {
    font-size: 1rem;
    color: green;

    &__title {
    	color: red;
    }
}

요로코롬도 사용가능하다.

 

또한 mixin 을 활용하여

 < base.scss >
    $font-color-default: wheat;
    $font-color-title: green;
    $font-color-orange: orange;

    @mixin title {
        font-size: 1.5rem;
        color: $font-color-orange;
        border: 1px solid;
    }

<component.scss>
    @use "../../styles/globals.scss" as global;

    .NumberTest {
        font-size: 1rem;
        color: green;

        &__title {
            @include global.title;
        }
    }

요로코롬도 사용가능하다.

 

자 이제 그만 알아보자.

 

[추신]

 

DOCS 안에서는

 npm install -g sass

이렇게 설치하지만, Next.js 에서는 작동하지 않고, 에러가 발생한다.

  To use Next.js' built-in Sass support, you first need to install `sass`.
        Run `npm i sass` or `yarn add sass` inside your workspace.

 

따라서 하란대로,

npm i sass

요로케 하면, 잘 작동한다.