| PHP | PHP 7.2 |
|---|---|
| CMS | Rhymix 2.x |
웹에서 css 를 열어보면
base.scss.css?20210121113223
/* Error while compiling SCSS: Incompatible units rem and px.: line: 38, column: 3 */
이렇게 에러가 나서 실제 css가 적용이 안되고 있는 것 같습니다.
.app-container {
width: 100%;
max-width: $base-container + ($base-padding * 2);
padding-left: $base-padding;
padding-right: $base-padding; // 에디터상에는 여기가 38번 라인으로 보여집니다.
margin: 0 auto;
@media (max-width: $mobile-w) {
padding-left: 1rem;
padding-right: 1rem;
}
무슨이야기인지 정확히는 이해하지 못했지만 일단 말씀해주신 대로 파일안에서 단위를 통일하던지 해보겠습니다.
일단 변수로 되어 있는 부분 직접 수치를 넣으니 에러가 일단 해결되었네요. 감사합니다.
여러 가지 CSS 단위를 섞어쓰는 것이 어떻게 보면 좀 허무한 게... rem을 쓰는 것이 옳다고 생각하는 사람들도 결국은 1rem=16px이라고 가정하고 적당한 값을 곱해서 원하는 크기를 구현해내요. 뭔가를 14px 크기로 보여주고 싶은데 아버지를 아버지라고 부르지 못하고 굳이 0.875rem이라고 쓰는 식입니다. 심지어 rem을 1.6으로 나눠서 10px짜리 em을 만들고, 거기에 다시 1.4를 곱해 14px을 구현하는 삽질이 무슨 모범답안인마냥 온라인상에 소개되어 있는 것을 본 기억이 납니다. (다행히 RXE 관련 자료는 아니었습니다.)
대체 무엇 때문일까요? rem 같은 상대단위를 사용하면 필요에 따라 전체적인 크기를 키우거나 줄여서 접근성을 높이는 데 도움이 된다는 주장이 기억나네요. 그러나 대부분의 브라우저가 (각 사이트의 viewport 설정마저 무시하고) 자유로운 확대/축소를 지원하게 된 덕분에 그것도 의미가 퇴색되었어요. 본문 영역의 글자 크기만 키우는 기능은 꾸준히 수요가 있지만, 이건 무슨 단위를 쓰더라도 상관이 없고요.
현실적으로 차이가 없는데다, 저 레이아웃을 만든 분도 항상 rem만 고집하시는 것은 아니니 굳이 여러 사람이 써야 하는 자료에 직관적이지 않은 단위를 기본값으로 써서 복잡하게 만들 필요가 있나 싶습니다...
결론: 1rem=16px 국룰입니다. 어느 쪽으로 통일해도 상관없으니, 편하신 쪽으로 쓰세요.^^
라이믹스에서 SCSS 컴파일에 사용하는 scssphp라는 외부 라이브러리가 업데이트되면서 단위 혼용을 막아 버렸더군요. 원래 안 되는 건데 지금까지 봐준 거라나? 아무튼 막혀버렸습니다. ㅠ
구버전 라이브러리는 최신 PHP 대응이 미흡하기 때문에, 라이믹스에서도 신버전을 사용할 수밖에 없습니다.
레이아웃 설정에서 px 단위를 사용하시면 오류가 발생합니다.
rem 단위를 사용하는 방향으로...
아니면 calc 를 사용하도록 scss 파일을 수정해 주셔야 하는데,
의외로 양이 많아서... 저는 하드코딩해서 사용했습니다.
라이믹스 2.0 으로 올라가면서 scss 컴파일러도 변경이 된건지 (업데이트가 된건지)
여러 단위를 섞어서 사용하면 연산이 먹히질 않습니다.
(사실 연산이 먹히지 않아야 정상인데, 1.9.x 에서는 사용이 가능하더라구요. 아무튼 레이아웃 문제입니다.)