🍯Pro-tips

상황 별 BreakPoint 적용하기

Breakpoints는 min-width 기준으로 생성되기 때문에 상황에 따라 모든 값을 넘겨줘야 할 필요가 없는 경우도 있습니다.

CASE 1

모든 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" } 

CASE 2

연속된 두 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" }