next.js에서 scss 사용하기 1편

도입하게된 계기

중복되는 css 를 클래스로 선언하여 기본 css 를 입히고 활용하고싶었고 모듈화를 하여 중복되는 코드를 줄이고싶었고 유지보수를 편하게 하고싶었다.

SASS(Syntactically Awesome StyleSheets)

보다 쉽게 CSS문법을 사용할 수 있게 해 주는 전처리기로 재활용성, 가독성을 높여 유지 보수를 쉽게 해줍니다.

SASS에서는 .scss와 .sass 두 가지 확장자를 지원합니다.

@mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있습니다.

@extend : 여러 선택자가 스타일을 상속받도록 할 수 있습니다.

@import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있습니다.

@function : SassScript에서 사용할 수 있는 사용자 정의 함수를 만들 수 있습니다.

@if / @each / @for : 상황에 맞춰 CSS가 적용되도록 흐름을 제어할 수 있습니다.

믹스인에게 인자를 주기

@mixin set-color {
  color: #fff;
  background-color: yellow;
}
 
h1 {
  @include set-color
}
 
p {
  @include set-color
}

믹스인에 내용 덧붙이기

@content 구문을 쓰면 @include로 불러와 쓸 때 내용을 추가로 입력할 수 있습니다.

@mixin hover {
    &:hover {
        font-weight: bold;
        @content;
    }
    &.on {
        @content;
    }
}
 
button {
    @include hover {
        color: red;
    }
}
 
/*
 * 출력결과:
 
 button:hover {
   font-weight: bold;
   color: red;
 }
 
 button.on {
   color: red;
 }
*/

익스텐드: 확장

.button {
  font-weight: bold;
  border-width: 1px;
}
 
.button-confirm {
  @extend .button;
  border-color: blue;
}
 
.button-error {
  @extend .button;
  border-color: red;
}
 
 
/*
  * 출력결과:
  
 .button, .button-error, .button-warn {
    font-weight: bold;
    border-width: 1px;
 }
 
 .button-confirm {
    border-color: blue;
 }
 
 .button-error {
    border-color: red;
 }
*/

@mixin vs. @extend 차이점

둘 다 스타일을 캡슐화하고 재사용하기에 좋은 방식이지만 약간의 차이가 있습니다.

@mixin

• 인자를 넣을 수 있어요.
• 선택자 관리가 쉬워서 전역으로 쓰기 편해요.
• 컴파일된 CSS가 길어져요.

@extend

• 연관성 있는 셀렉터들을 묶어 관리할 수 있어요.
• 미디어쿼리 등으로 셀렉터가 묶일 수 없다면 쓸 수 없어요.

앞서 컴파일된 CSS를 보면 알 수 있듯이

@mixin: 미리 정의한 속성을 복사해서 따로 적용
@extend: 선택자를 함께 묶어 속성을 한번에 적용
한다는 차이점이 있고, 여기서의 핵심은 "얼마나 연관성이 있는가"입니다.

선택자끼리 의미론적 관계가 있다면 @extend를, 그렇지 않고 단순히 속성만 겹치는 관계라면 @mixin을 쓰는 것을 추천합니다.

@import

/* homepage.css */

@import "common.css";
@import "header.css";

하지만 위와 같이 CSS를 불러오는 건 별로 권장하지 않는 방법인데요, 이유는 브라우저가 각각의 CSS를 직렬로 불러오기 때문입니다.

따라서 common 요청하고, header 요청하고, 그 다음 CSS 요청하고... 하느라 로딩이 느려집니다.

한편, Sass에서 @import를 통해 다른 스타일시트를 불러오는 것은 조금 다릅니다.

Sass의 임포트는 "컴파일 과정에서 처리되기 때문에" 브라우저가 HTTP 요청을 여러 번 하지 않아도 되기 때문이죠!

@use

@import는 쉽고 빠르게 다른 스타일시트를 가져올 수 있도록 해주지만,
Dart Sass를 쓰고 있다면 @import 대신 @use를 사용하는 것이 좋습니다.

이유는 @import는 대상을 전역으로 불러오기 때문입니다.

변수, 믹스인, 함수 등(Sass에서는 이걸 '멤버'라고 불러요)에 전역으로 접근할 수 있기 때문에, 각 멤버가 어디서 정의되었는지 파악하기가 어렵고 이름이 충돌할 수 있다는 단점이 있습니다.

	
// style.scss
 
@import 'module1';
@import 'module2';
@import 'module3';
 
h1 {
  font-weight: $font-weight;
}

@use도 @import와 비슷하게 @use <불러올 scss 파일>로 작성합니다.

차이점이 있다면 멤버를 사용할 때 네임스페이스를 지정해 줘야 한다는 것입니다.

@use의 주요 특징

- 항상 파일 시작부분에 쓰여야 합니다. 스타일 규칙에 포함될 수 없어요.

- 가져온 멤버는 모두 네임스페이스를 갖습니다.

- 여러번 @use 하더라도 중복해서 가져오지 않습니다.

- 언더바(_) 또는 하이픈(-)으로 시작하는 멤버는 프라이빗으로 취급하므로 가져오지 않습니다.

네임스페이스는 기본적으로 파일명을 가리킵니다. (URL의 마지막 요소)

하지만 난 다른 네임스페이스로 부르고 싶어! 하시는 분들은 다르게 설정할 수도 있습니다.

@use "" as 이렇게 하면 더 짧게 호출하거나 동일한 이름으로 여러 모듈을 불러오는 것도 가능합니다.

@use "module1" as m;
@use "module2" as mmmmm;

h1 {
color: mmmmm.$color;
}

파일 구조

scss/
├─ base/
│  ├─ _index.scss
│  ├─ _reset.scss
│  ├─ _common.scss
├─ helpers/
│  ├─ _index.scss
│  ├─ _mixin.scss
│  ├─ _meidaQuery.scss
│  ├─ _variable.scss
│  ├─ _animation.scss
├─ components/
│  ├─ _index.scss
│  ├─ _button.scss
├─ pages/
│  ├─ _index.scss
│  ├─ _home.scss
├─ vendors/
├─ style.scss

base/: 리셋이나 노멀라이즈, 또는 아주 기본으로 쓰일 스타일(타이포그래피 등)
helpers/: 직접 스타일을 적용하지 않지만 개발에 필요한 스타일(믹스인, 함수 등)
components/: 말그대로 개별 컴포넌트!
pages/: 말그대로 개별 페이지!
vendors/: 외부 라이브러리 등을 사용하는 경우 필요한 스타일
styles.scss: 컴파일할 스타일시트

참고한 블로그 :
https://nykim.work/113