[SCSS] SCSS Import와 Partials

SCSS는 코드를 모듈화하고 재사용성을 높이기 위해 @import와 Partials 기능을 제공합니다. @import를 사용하여 스타일 파일을 분리하고, Partials로 작성한 코드를 불러와서 사용할 수 있습니다. 이 글에서는 SCSS의 @import와 Partials에 대해 알아보겠습니다.

---

@import 사용하기

SCSS의 @import는 다른 SCSS 파일을 현재 파일에 불러와서 사용하는 기능을 제공합니다. 이를 통해 스타일 파일을 여러 개로 분리하여 유지보수를 용이하게 할 수 있습니다.

예를 들어, variables.scss, mixins.scss, buttons.scss 파일로 구성된 프로젝트를 가정해봅시다.

variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

 

mixins.scss

@mixin button-style($background, $color) {
  background-color: $background;
  color: $color;
}

 

buttons.scss

@import "variables";
@import "mixins";

.button-primary {
  @include button-style($primary-color, #fff);
}

.button-secondary {
  @include button-style($secondary-color, #fff);
}

위의 예제에서 @import를 사용하여 variables.scss와 mixins.scss를 buttons.scss에서 불러왔습니다. 이렇게 함으로써 변수와 믹스인을 buttons.scss에서 사용할 수 있게 되었습니다.

---

Partials

Partials는 파일 이름이 _로 시작하는 SCSS 파일을 의미합니다. 예를 들어, _variables.scss, _mixins.scss와 같이 파일 이름이 _로 시작하는 SCSS 파일은 Partials 파일이 됩니다. Partials 파일은 별도로 컴파일되지 않으며, 다른 SCSS 파일에서 @import로 불러와서 사용합니다.

Partials 파일을 사용하면 프로젝트의 코드를 더욱 모듈화하여 구성할 수 있습니다. Partials 파일은 일반적으로 변수, 믹스인, 함수 등의 코드를 작성하는 데에 사용됩니다.

_variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;

 

_mixins.scss

@mixin button-style($background, $color) {
  background-color: $background;
  color: $color;
}

 

buttons.scss

@import "variables";
@import "mixins";

.button-primary {
  @include button-style($primary-color, #fff);
}

.button-secondary {
  @include button-style($secondary-color, #fff);
}

위의 예제에서 variables.scss와 mixins.scss를 Partials로 만들어 _variables.scss와 _mixins.scss로 변경하였습니다. 이렇게 함으로써 Partials 파일은 다른 SCSS 파일에서 불러와서 사용되므로, 컴파일 시 별도로 CSS 파일로 생성되지 않습니다.

SCSS의 @import와 Partials 기능을 통해 스타일 코드를 더욱 모듈화하고 재사용성을 높일 수 있습니다. 이를 통해 코드를 효율적으로 구성하고 유지보수를 용이하게 할 수 있습니다. 다음 글에서는 SCSS의 다른 기능들을 더 자세히 살펴보겠습니다.