[Fandom-K] SCSS 추가 및 기초 설정

1. 폴더 구조

역할별로 base, components, helpers, pages로 폴더를 구분했습니다. style.scss 파일을 제외한 나머지 scss 파일들은 css로 컴파일 하지 않기 위해서 _name.scss 형식으로 생성했습니다.

 

@use : 각 폴더의 namespace를 사용하여 폴더에 있는 _index.scss를 불러옵니다. 최종적으로 모든 scss를 style.css로 컴파일 하기 위해 style.scss를 작성했습니다.

// style.scss
@use "base";
@use "helpers";
@use "components";
@use "pages";

 

@forward : 폴더별 _index.scss 파일에 @forward로 scss 파일을 모아서, 다른 곳에서 쓸 수 있도록 했습니다.

// base/_index.scss
@forward "reset";
@forward "normalize";

 

2. Live Sass Compiler 설치 및 실행

scss 파일을 css로 컴파일하기 위해서 vscode의 확장(extensions) 프로그램인 Live Sass Compiler를 설치했습니다.

 

3. Live Sass Compiler 실행

vscode의 오른쪽 하단을 보면 Watch Sass라는 버튼이 있습니다.

현재 상태에서 버튼을 눌러 동작 시킵니다.

버튼을 눌러 동작 시키면 위와 같이 Working on it...이라는 문구로 바뀝니다. 이제 scss로 작업한 내용을 저장하면 Live Sass Compiler가 자동으로 css 파일을 생성해줍니다.

 

4. SCSS를 채택한 이유

1. 코드 가독성 및 유지보수

SCSS는 CSS에서 사용할 수 없는 중첩(nesting)을 통해 코드 가독성과 유지보수를 향상시킵니다.

// css
.page {}
.page .container {}
.page .container .wrap {}
.page .container .wrap .content {}

// scss
.page {
  .container {
    .wrap {
      .content {
      }
    }
  }
}

 

2. 모듈화(Modularization)

@use와 @forward를 통해 코드 재사용성을 높이고, 복잡한 스타일 구조를 논리적으로 관리합니다.

 

3. 믹스인과 함수(Mixins & Functions)

반복되는 스타일을 재사용할 수 있어 코드 중복을 줄입니다.

@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
}

.button {
  @include button-styles(#3498db, #fff);
}

 

@function calculate-size($multiplier) {
  @return 10px * $multiplier;
}

.container {
  margin: calculate-spacing(2); // 결과: 20px
  padding: calculate-spacing(3); // 결과: 30px
}