이번 포스팅에서는 SCSS의 import와 모듈에 대하여 알아보자.
@import
CSS에서 @import로 다른 파일을 연결시킬 수 있습니다.
SCSS에서도 @import를 사용할 수 있는데, CSS의 @import와는 문법이나 작동 방식이 다릅니다.
@import './variables.scss'; // 현재 폴더의 variables.scss 파일을 가져온다.// main.scss
@import './variables.scss';
.main {
background-color: $primary;
border: 4px solid $success;
}
// variables.scss
$primary: orange;
$error: red;
$success: yellowgreen;주의할 점은 SCSS @import는 기본적으로 SCSS 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다.
CSS 규칙으로 파일을 가져오게 된다면 당연히 브라우저에서는 scss 파일을 읽지 못하므로 오류가 발생하게 됩니다.
- 파일 확장자가
.css일 때 - 파일 이름이
http://로 시작하는 경우 url()이 붙었을 경우- 미디어쿼리가 있는 경우
@import url("./variables.scss");
@import "./variables.css";
@import "http://google.com/variables.scss";@use
@use를 사용하면 아래와 같은 기능을 사용할 수 있습니다.
주의할 점은 @use는 다른 규칙들보다 먼저 작성되어야 한다.(@forward 제외)
하지만, 모듈을 구성할 때 사용할 변수는 @use 보다 먼저 선언될 수 있다.
- 다른 Sass 스타일시트로부터 믹스인(mixin), 함수(function), 변수(variable)을 가져올 수 있다.
- 여러개의 스타일시트를 하나로 합칠 수 있다.
- @use를 사용하여 가져온 스타일시트를 모듈(Module)이라고 부른다.
- @use를 사용하여 가져오는 스타일은 여러번 로드되더라도 컴파일된 CSS 파일에는 한번만 표시된다.
사용법과 네임스페이스 설정
@use "가져오고자 하는 모듈의 URL" as "namespace"@use './variables.scss' as var;
@use './mixins';
.main {
background-color: var.$primary;
border: 4px solid var.$success;
@include mixins.square();
}@forward
@use와 @forward는 비슷한 기능을 한다.
둘다 각 파일의 모든 요소를 import하며 실제로 컴파일된 CSS 결과물도 같다.
그러나 가장 큰 차이점이 하나 있는데, 바로 @use와 다르게 @forward를 사용하면 페이지 내에서 forwad한 모듈의 요소(variables, functions, mixins)를 사용할 수 없다는 점이다.
@forward는 단지 전달만 할뿐이다. 만약 forward한 모듈의 요소를 사용하려면 forward로 모듈을 가져온 파일을 @use를 사용해 import하면 된다.
// 네임스페이스에 접두사를 붙이고 '*'기호를 통해 불러온 모듈의 변수나 함수, mixin을 사용가능하다.
@forward "./variables" as var-*;아래의 경우 서로 다른 폴더의 scss에서의 모듈 전달과 참조를 사용하는 방법입니다.
// ./your-style/main.scss
@use "./variables" as var;
@use "./mixins" as mix;
@forward "./variables" as var-*;
@forward "./mixins" as mix-*;
.your-style {
background-color: var.$primary;
color: var.$success;
@include mix.square;
}
// ./my-style/main.scss
@use "../your-style/main.scss" as your;
.my-style {
position: relative;
border: 4px solid your.$var-primary; // $ 뒤에 접두사와 변수명이 들어간 것에 주의
@include your.mix-square(200px);
}
// ----------------------------------------
// .your-style/_mixins.scss
@mixin square($size: 100px) {
width: $size;
height: $size;
}
// .your-style/_variables.scss
$primary: orange;
$error: red;
$success: yellowgreen;참고자료
