flex 레이아웃 css 에러가 나는거 같은데요.

레이아웃 설정에서 px 단위를 사용하시면 오류가 발생합니다.
rem 단위를 사용하는 방향으로...

 

아니면 calc 를 사용하도록 scss 파일을 수정해 주셔야 하는데,

의외로 양이 많아서... 저는 하드코딩해서 사용했습니다.

라이믹스 2.0 으로 올라가면서 scss 컴파일러도 변경이 된건지 (업데이트가 된건지)
여러 단위를 섞어서 사용하면 연산이 먹히질 않습니다.
(사실 연산이 먹히지 않아야 정상인데, 1.9.x 에서는 사용이 가능하더라구요. 아무튼 레이아웃 문제입니다.)

여러 가지 CSS 단위를 섞어쓰는 것이 어떻게 보면 좀 허무한 게... rem을 쓰는 것이 옳다고 생각하는 사람들도 결국은 1rem=16px이라고 가정하고 적당한 값을 곱해서 원하는 크기를 구현해내요. 뭔가를 14px 크기로 보여주고 싶은데 아버지를 아버지라고 부르지 못하고 굳이 0.875rem이라고 쓰는 식입니다. 심지어 rem을 1.6으로 나눠서 10px짜리 em을 만들고, 거기에 다시 1.4를 곱해 14px을 구현하는 삽질이 무슨 모범답안인마냥 온라인상에 소개되어 있는 것을 본 기억이 납니다. (다행히 RXE 관련 자료는 아니었습니다.)

 

대체 무엇 때문일까요? rem 같은 상대단위를 사용하면 필요에 따라 전체적인 크기를 키우거나 줄여서 접근성을 높이는 데 도움이 된다는 주장이 기억나네요. 그러나 대부분의 브라우저가 (각 사이트의 viewport 설정마저 무시하고) 자유로운 확대/축소를 지원하게 된 덕분에 그것도 의미가 퇴색되었어요. 본문 영역의 글자 크기만 키우는 기능은 꾸준히 수요가 있지만, 이건 무슨 단위를 쓰더라도 상관이 없고요.

 

현실적으로 차이가 없는데다, 저 레이아웃을 만든 분도 항상 rem만 고집하시는 것은 아니니 굳이 여러 사람이 써야 하는 자료에 직관적이지 않은 단위를 기본값으로 써서 복잡하게 만들 필요가 있나 싶습니다...

 

결론: 1rem=16px 국룰입니다. 어느 쪽으로 통일해도 상관없으니, 편하신 쪽으로 쓰세요.^^

저도 flex레이아웃 적용해보고 있는데 설정의 최대폭이 작동을 하지 않더라구요. 변수되어 있는 부분에 치수 직접 넣어도 문제가 안생기나요? 이래저래 건들었다 꼬여버릴까 걱정이 되긴 하네요

원래는 rem/px 단위를 함께 계산하는 것이 가능했지만 갑자기 안되더라구요. 정확한 원인은 모르겠습니다만... 저 부분들은 그대로 감싸서 calc 함수 적용하고 변수는 #{}으로 감싸면 정상 작동될 겁니다. 아래 코드처럼요.

max-width: calc(#{$base-container} + (#{$base-padding} * 2);
위 코드는 scss로 컴파일하면 아래와 같습니다.
max-width: calc(1200px + (1.25rem * 2);