[Sass/SCSS] At Rules - @use

혼자 공부하고 정리하려고 만들었지만
혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝
전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오..

https://sass-lang.com/documentation/at-rules/use 를 참고하였습니다.

@use 를 사용하면

• 다른 Sass 스타일시트로부터 믹스인(mixin), 함수(function), 변수(variable)을 가져올 수 있다.
• 여러개의 스타일시트를 하나로 합칠 수 있다. 
• @use를 사용하여 가져온 스타일시트를 모듈(Module)이라고 부른다.
• @use를 사용하여 가져오는 스타일은 여러번 로드되더라도 컴파일된 CSS 파일에는 한번만 표시된다.

❗ 주의할 점 : @use는 다른 규칙들보다 먼저 작성되어야 한다.(@forward 제외) 하지만, 모듈을 구성할 때 사용할 변수는 @use 보다 먼저 선언될 수 있다.

---

사용법

@use "가져오고자 하는 모듈의 URL"

example : 

// _code.scss
code {
  padding: .25em;
  line-height: 0;
}

//_list.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

//style.scss
@use 'code';
@use 'lists';

css

code {
  padding: 0.25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ul ol, ol ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

---

멤버(Member) 가져오기

@use를 사용하여 다른 모듈로부터 변수, 함수, 믹스인을 가져올 수 있다.

namespace.$변수명
namespace.함수명()
namespace.믹스인

*namespace : 가져오고자 하는 모듈의 URL의 마지막 컴포넌트

example : 

// src/_corners.scss
$radius: 3px;

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

// style.scss
@use "src/corners";

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

css :

.button {
  border-radius: 3px;
  padding: 8px;
}

💡 Tip : @import를 사용할 때는 다른 라이브러리와의 충돌을 막기 위해 긴 이름을 쓰는 것을 추천했었지만, @use를 사용할 때는 $radius, $width 같이 간단한 이름을 정하는 게 좋다. namespace로 멤버를 가져오니까!

---

namespace 설정

namespace의 기본값은 가져오고자 하는 모듈의 URL의 마지막 컴포넌트이지만 as를 사용하여 원하는 namespace를 설정할 수 있다.

@use "url" as namespace

// corners.scss
$radius: 3px;

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

// style.scss
@use "corners" as c;

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

또한, as 다음에 *을 쓰면, namespace 없이 모듈을 가져올 수도 있다.

@use "url" as *

---

Private 멤버

멤버의 이름 앞에 - 또는 _를 붙이면 Private로 사용이 가능하다.
Private으로 설정하면, 다른 스타일시트에서 사용이 불가능하다.

---

모듈 설정(Configuring Modules)

모듈 멤버의 값을 설정하여 가져오려면,

@use url with(
  변수명 : 값,
  변수명 : 값
)

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

값 설정 없이 그냥 가져오는 경우, default 값이 들어가게 된다.

// style.scss
@use 'library';

CSS :

code {
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

 값을 설정하여 가져오는 경우, 설정 값이 들어간다.

// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

CSS :

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

---

모듈 찾기

스타일시트를 가져올 때마다 절대경로를 찾아서 기입하는 건 번거롭다.
👉🏻 Sass 알고리즘은 모듈을 쉽게 찾을 수 있도록 해준다. @use "variables"라고만 입력해도, 알아서 variables.scss, variables.sass, variables.css를 가져온다.

---

Partial

_로 시작하는 파일은 컴파일되지 않는다. 이러한 파일들을 Partial라고 부른다. Partial을 불러올 때는 _를 생략할 수 있다.

---

인덱스 파일(Index File)

폴더 안에 _index.scss 또는 _index.sass 파일이 있다면, 폴더의 URL을 로드할 때 자동으로 로드된다.

예를 들어, foundation이라는 폴더 내에 _index.scss 파일이 있을 경우,

@use "foundation"; 을 통해 _index.scss 파일이 자동으로 로드된다.

---

.sass, .scss 파일 뿐만 아니라 .css 파일도 가져올 수 있다.