[SCSS] 파일 구조와 모듈화

서론

SCSS를 사용하는 가장 큰 이유이자 핵심이다. 컴포넌트를 재사용하고 컴포넌트끼리의 결합을 통해 하나의 큰 시스템을 구축한다. html과 css만으로는 그런 방법을 사용할 수 없는줄 알았는데 SCSS를 이용하면 객체지향적으로 코드 작성이 가능하다.

---

파일 구조

• base/
• components/
• layout/
• pages/
• themes/
• abstracts/
• vendors/
• main.scss

이 형식은 SCSS 뿐만이 아니라 리액트나 뷰와 같은 다른 라이브러리에서도 일반적으로 사용한다. 반드시 이 구조를 사용해야 한다는 것은 아니지만 일반적으로 많이 사용하는 구조이니 SCSS에서도 사용하면 쉽게 적용 가능하다. 

 

폴더별 예시 파일

폴더별 예시 파일

 

@use

이제 해당 폴더에서 컴포넌트를 만든 후 다른 컴포넌트에서 사용하기 위한 키워드는 @use 이다. 모듈을 불러오기 위해서는 아래와 같이 사용할 수 있다. 

// 모듈 선언 
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// 호출부
@use "modules/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

 

마찬가지로 네임 스페이스를 사용할 수도 있다. 

// 모듈 선언 
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// 호출부
@use "modules/corners" as cn;

.button {
  @include cn.rounded;		// cn으로 호출 가능
  padding: 5px + cn.$radius;
}

 

@forward

@forward 키워드는 각 폴더안에 있는 여러 컴포넌트를 하나로 묶기 위해 사용된다. 각각의 폴더에 있는 _index 파일에서 폴더 내 파일을 모두 묶어서 내보낸다.

// components 폴더에 있는 _index.scss

@forward 'button';
@forward 'dropdown';