지난 포스팅은 @import를 사용해서 .scss(.sass) 파일을 분리하는 것을 공부해보았다. 그런데 최신버전에서는 @import를 쓰는 대신 @use와 @forward를 쓰라고 한다. @use와 @import는 어떻게 다를까? 그리고 왜 @import 대신 @use, @forward를 쓰는 것이 나을까?
1. @import를 쓰면 생기는 문제
지난 포스팅에서 이야기했듯이 규모가 큰 프로젝트일수록 .scss 파일을 따로 분리해서 사용한다. 예를 들어 배경색은 _bg.scss 파일로, 변수들은 _var.scss 이런식으로 따로 정리해서 모아둔다.
그러다보면 변수명도 겹칠 때가 있을지모른다. 배경색의 메인컬러를 지정하고 싶어서 $main-color라고 변수를 만들어 놨는데 폰트 색을 지정할 때도 $main-color라는 변수를 사용할 수 있기 때문이다. 아니면 다른 파일에서 그 변수를 참조해서 사용하게 되거나.(이 경우 @forward를 사용한다. 그건 잠시 뒤에 설명하겠다.)
<link rel="stylesheet" href="style/main.css">
<body>
<div class="bg">
<h1>이제 @import 대신 @use를 쓰세요!!!</h1>
</div>
</body>//_divcolor.scss
//div 배경색으로 적용할 색상 변수
$main-color: blue;
//_h1color.scss
//h1 폰트 색으로 적용할 색상 변수
$main-color: yellow;//main.scss
@import './divcolor';
@import './h1color';
div{
background: {
color: $main-color;
}
}
/*두 개의 .scss 파일 모두에 $main-color라는 변수가 존재한다. 이 경우, @import가 가장 최근에 된
h1color 파일에 있는 $main-color의 변수 값이 대입된다. */
//main.css
div {
background-color: yellow;
}
/*# sourceMappingURL=main.css.map */두 개의 .scss 파일 모두에 $main-color라는 변수가 존재한다. 이 경우, @import가 가장 최근에 된
h1color 파일에 있는 $main-color의 변수 값이 대입된다.
이렇게 되면 코드를 짜는 사람의 의도와 다르게 스타일이 지정된다. 또 가장 최근 import된 파일의 변수만 적용되므로 매번 순서를 바꿔서 지정해야 한다. 프로젝트가 아주 커지게 된다면 매우 귀찮아짐... 아이고 귀찮다
이 문제를 해결해 주는 것이 @use다.
2. @use : 서로 다른 .scss 파일에서 같은 변수명을 가진 값을 가져와야 할 때 사용한다.
이게 무슨 말인지 예제를 통해 살펴보자.
<link rel="stylesheet" href="style/main.css">
<body>
<div class="bg">
<h1>이제 @import 대신 @use를 쓰세요!!!</h1>
</div>
</body>//_divcolor.scss
//div 배경색으로 적용할 색상 변수
$main-color: blue;
//_h1color.scss
//h1 폰트 색으로 적용할 색상 변수
$main-color: yellow;여기까진 방금 전이랑 똑같은 코드다.
//main.scss
@use './divcolor' as bg;
@use './h1color' as tit;
div{
background: {
color: bg.$main-color;
//blue
}
h1{
color: tit.$main-color;
//yellow
}
}
//main.css
div {
background-color: blue;
}
div h1 {
color: yellow;
}
잘 적용 되었다.
@use '파일명' as name
스타일 : name.$변수이렇게 사용하면 된다. @import 할 때 이렇게 쓰면 에러납니다. 그러니까 @use를 쓰는 버릇을 들입시다.
3. @forward: 한 번에 여러 파일을 @use해서 사용할 때
@forward는 말로 설명하기가 어렵다. @use를 여러번 사용하게 될 때 @forward를 쓰는 것이 프로젝트 할 때 편하다.
(대규모 프로젝트에서 자주 쓰게 될 것. 작은 프로젝트에서는 사실 쓸 일이 없을 것이다.)
//_divcolor.scss
$bg-color: blue;
//_h1color.scss
$main-color: yellow;
//_style.scss
@forward './divcolor';
@forward './h1color';
//main.scss
@use './style' as style;
div{
background: {
color: style.$bg-color;
}
h1{
color: style.$main-color;
}
}
//main.css
div {
background-color: blue;
}
div h1 {
color: yellow;
}위의 코드에서 _style.scss만 따로 추가한 코드. 그래도 결과 화면은 같다. 여러 파일을 한번에 불러들여와 다른 파일에서 변수를 사용하고 싶을 때 @forward를 통해 넘겨준다.
'HTML & CSS > SASS(SCSS)' 카테고리의 다른 글
| [Sass/SCSS]반응형 웹을 효율적으로 작성하기 위한 방법($font-size : px to vw) (0) | 2023.03.15 |
|---|---|
| Sass/SCSS 7. @extend (0) | 2023.03.07 |
| Sass/SCSS 6. Partials (@import) (0) | 2023.01.26 |
| Sass/SCSS 문법 5. 믹스인(Mixins) (0) | 2023.01.26 |
| Sass/SCSS 문법 4. Maps와 @each문 사용하기 (0) | 2023.01.26 |