🍯Pro-tips
상황 별 BreakPoint 적용하기
Breakpoints는 min-width 기준으로 생성되기 때문에 상황에 따라 모든 값을 넘겨줘야 할 필요가 없는 경우도 있습니다.
모든 BreakPoint의 값이 다를 경우 [ width = base : 10px sm : 20px, md : 30px, lg : 40px]
Array Syntax : ["10px", "20px", "30px", "40px"]
Object Syntax : { base: "10px", sm: "20px", md: "30px", lg: "40px" } 연속된 두 Breakpoint의 값이 같을 경우 [ width = base, sm : 10px, md: 20px, lg: 30px]
// 배열 방식으로 적용 할 경우 null 값을 던져 의미 없는 CSS 생성을 막아줍니다.
Array Syntax : ["10px", null, "20px", "30px"]
Object Syntax : { base: "10px", md: "20px", lg: "30px" }Last updated