RFS
RFS
반응형 스케일링 엔진인 RFS가 무엇인지, 그리고 Bootstrap에서 RFS 믹스인과 함수를 어떻게 사용하는지 설명하는 문서예요.
출처: 문서
본문
RFS란? (What is RFS?)
Bootstrap의 사이드 프로젝트 RFS는 단위 크기 조정 엔진이에요. 처음에는 폰트 크기를 조정하기 위해 개발됐기 때문에 Responsive Font Sizes의 약자예요. 요즘 RFS는 margin, padding, border-radius, 심지어 box-shadow처럼 단위 값을 가진 대부분의 CSS 속성을 다시 스케일링할 수 있어요.
이 메커니즘은 브라우저 뷰포트 크기에 따라 적절한 값을 자동으로 계산해요. 반응형 스케일링 동작을 활성화하기 위해 rem과 뷰포트 단위가 섞인 calc() 함수로 컴파일돼요.
RFS 사용하기 (Using RFS)
믹스인은 Bootstrap에 포함되어 있어서 Bootstrap scss를 포함하면 사용할 수 있어요. 필요하다면 RFS를 독립적으로 설치할 수도 있어요.
믹스인 사용 (Using the mixins)
rfs() 믹스인은 font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left에 대한 축약형(shorthand)을 갖고 있어요. 아래 예시에서 소스 Sass와 컴파일된 CSS를 확인할 수 있어요.
.title {
@include font-size(4rem);
}
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
다른 속성은 rfs() 믹스인에 이렇게 전달할 수 있어요.
.selector {
@include rfs(4rem, border-radius);
}
!important도 원하는 값에 그냥 추가할 수 있어요.
.selector {
@include padding(2.5rem !important);
}
함수 사용 (Using the functions)
include를 사용하고 싶지 않다면 함수도 두 가지가 있어요.
이 예시에서는 Bootstrap 내장 반응형 중단점 믹스인 하나를 사용해서 lg 중단점 아래에서만 스타일을 적용해요.
.selector {
@include media-breakpoint-down(lg) {
padding: rfs-fluid-value(2rem);
font-size: rfs-fluid-value(1.125rem);
}
}
@media (max-width: 991.98px) {
.selector {
padding: calc(1.325rem + 0.9vw);
font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
}
}
확장 문서 (Extended documentation)
RFS는 Bootstrap 조직 아래의 별도 프로젝트예요. RFS와 그 구성에 대한 자세한 내용은 GitHub 저장소에서 확인할 수 있어요.