[Bootstrap] SCSS 변수 찾기, rfs() 가 뭔가?

 

 

이 코드를 📁 node_modules/bootstrap/scss/_type.scss 에서 찾았는데

해당 $font-size라는 변수명이 node_modules/bootstrap/scss/_variables.scss에 없당 -_-

@each $display, $font-size in $display-font-sizes {
  .display-#{$display} {
    @include font-size($font-size);
    font-weight: $display-font-weight;
    line-height: $display-line-height;
  }
}

 

 

일단 bootstrap 폴더에서만 검색

 

 

 

 

 

 

 

$font-size가 정의된 파일이 없어서 폴더 내 전체 검색을 해봐도 정의된 내역은 없다......?


📚  결론  📚
이 $font-size는 어디선가 정의된 $display-font-sizes map에서 온 값
직접 정의된 변수가 아니라, map 안에서 순회 중에 생성된 임시 변수!!!

 

 

👩🏻 그럼 해당 코드 해석을 해보쟝

 

 

 ✔ 1. @each $display, $font-size in $display-font-sizes { 

_variable.scss에 정의되어 있는 변수 👇

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
) !default;

 

=>

@each 반복문, $display-font-sizes: map 자료형

1: 5rem → $display = 1, $font-size = 5rem

2: 4.5rem → $display = 2, $font-size = 4.5rem

.

.

이렇게 계속 반복

 

 ✔ 2. .display-#{$display} { 

=>

.display-#{$display} → .display-1 ($display가 1일 때)

이걸 SCSS의 문자열 보간법이라고 함

 

.display-1{}

.display-2{}

.

.

이렇게 CSS가 만들어짐

 

 ✔ 3. @include font-size($font-size); 

=>

SCSS Mixin을 사용한 문법

style font-size 값으로 위에서 정의한 $font-size를 가져옴

 

.display-1{font-size:5rem;line-height:1.2;}

 

 ✔ 4. font-weight: $display-font-weight;

=>

_variables.scss에 정의되어 있는 변수 값을 가져온다

$display-font-weight: 300 !default;

 

이렇게 정의되어 있기에, font-weight:300이 된다.

 

 

결과로 들어오는 css

.display-1 {
    font-size: calc(1.625rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2;
}

 

근데 결과로 들어오는 font-size 값이 다르다!
3번에서 include로 받아오는 부분에서 mixin이 사용된 것 같다.

@mixin font-size가 정의된 걸 다시 찾아야해..!!

 

음 근데 아무리 전체 검색을 해도 @mixin font-size가 나오지 않고 @import font-size 된 내역만 나온다

 

지피티의 추천대로 git bash로 전체 검색해보기

grep -rn --include="*.scss" "font-size(" .

ㅠㅠㅠ찾았다..ㅠㅠㅠㅠㅠㅠㅠㅠ

 

📁 node_modules/bootstrap/scss/vendor/_rfs.scss

이 파일은 공식적으로 제공하는 반응형 폰트 사이즈 시스템 이라고 한다.

@mixin font-size($value) {
  @include rfs($value);
}

 

@mixin font-size($value) {

=> Bootstrap5부터는 font-size를 px/rem으로만 쓰지 않고, 뷰포트에 따라 유동적으로 크기 조정할 수 있는 RFS 믹스인 도입

 

@include rfs($font-size);

=> @include rfs($font-size);
css => font-size: calc(1.25rem + 0.5vw); /* 예시 */

 

📌 ** rfs() 

=> 화면이 작으면 줄이고, 화면이 크면 키워줌 ( calc()와 @media까지 자동으로 만들어 줌 )

 

👇 rfs() 가 없으면 해줘야 했던 부분 👇

font-size: 2rem;

@media (min-width: 768px) {
  font-size: 2.5rem;
}

@media (min-width: 1200px) {
  font-size: 3rem;
}

 

이걸 RFS 시스템을 사용하면 한줄로 처리

@include rfs(2rem);

 

 

margin, padding, line-height 같은 것도 사용 가능하다.

@include rfs(3rem, margin-top);

 

 

❓❓❓

👩🏻: 그럼 왜 아까 vscode에서 전체 검색했을 때는 안나왔찌???

 

📚: node_modules 폴더에서만 적용되는 내용

최근에 열었던 파일이나, 열어둔 폴더 구조였으면 찾을 수 있으나,  접근한 적 없는 node_modules 폴더에서는 안 찾아준다고 한다..!!

=> VS Code는 성능 최적화 때문에 일부만 인덱싱함 (최근 열람 위주)

=> node_modules는 워낙 크고 무거워서, 기본적으로 검색에서 제외시킴

 

❗ 해결 방법 ❗

✔ 1. Ctrl + Shift + F에서 "files to include"에 node_modules/bootstrap/scss/** 또는 node_modules(해당 폴더 경로)를 포함

✔ 2. vs code settings.json에서 검색 제외 목록 수정

"search.exclude": {
  "**/node_modules": false
}

✔ 3. git bash에서 명령어로 검색

grep -rn --include="*.scss" "font-size(" .