File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-18
08-14
08-14
08-18
08-19
08-19
@use "sass:map";
@use "tokens";
/// PC 이상(>= 768px). 미디어 쿼리 조건부는 `var()`를 해석하지 못해 브레이크포인트만
/// 컴파일타임 값이고, 그래서 이 믹스인 경유가 강제된다.
@mixin pc {
@media (min-width: tokens.$breakpoint-pc) {
@content;
}
}
/// PC 미만. `pc`와 경계가 겹치지 않도록 0.02px을 뺀다.
@mixin mobile {
@media (max-width: tokens.$breakpoint-pc - 0.02px) {
@content;
}
}
/// 이름 붙은 브레이크포인트 이상에서 적용 — `xsm`(768) · `sm`(1024) · `default`(1440).
/// 같은 이름의 `grid-wrap-*`이 그 폭의 컨테이너다.
@mixin from($name) {
@if not map.has-key(tokens.$breakpoints, $name) {
@error "[@fox] 알 수 없는 브레이크포인트: `#{$name}` — 사용 가능한 값: #{map.keys(tokens.$breakpoints)}";
}
@media (min-width: map.get(tokens.$breakpoints, $name)) {
@content;
}
}