질문/조언질답게시판
Extra Form
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;
  }

  • profile

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

     

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

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

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

  • profile profile

    무슨이야기인지 정확히는 이해하지 못했지만 일단 말씀해주신 대로 파일안에서 단위를 통일하던지 해보겠습니다.

     

    일단 변수로 되어 있는 부분 직접 수치를 넣으니 에러가 일단 해결되었네요. 감사합니다.

  • profile profile
    고쳐야할 곳이 굉장히 많은데 참고해서 수정하고 있습니다. 비슷하게 적용되는 부분들이 있을 것 같아 양해 부탁드립니다. 변수들 값이 이용되지 않아(왠지 모를) 직접 수정해야 할 곳이 굉장히 많네요.
  • profile

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

     

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

     

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

     

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

  • profile profile
    px, em 등 대중없이 사용했었는데 통일해주는게 좋은거군요.
    rem은 이번에 라이믹스 시작하면서 알게된 치수인데 px에 익숙하다보니 rem 계산할려니 복잡하네요.
  • profile
    저도 flex레이아웃 적용해보고 있는데 설정의 최대폭이 작동을 하지 않더라구요. 변수되어 있는 부분에 치수 직접 넣어도 문제가 안생기나요? 이래저래 건들었다 꼬여버릴까 걱정이 되긴 하네요
  • profile profile
    변수 안먹는게 많아서 일일이 컬러 코드 등도 css에 직접 넣었습니다. 큰 문제는 없고 하드코딩 되어버리는거죠
  • profile
    원래는 rem/px 단위를 함께 계산하는 것이 가능했지만 갑자기 안되더라구요. 정확한 원인은 모르겠습니다만... 저 부분들은 그대로 감싸서 calc 함수 적용하고 변수는 #{}으로 감싸면 정상 작동될 겁니다. 아래 코드처럼요.

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

    라이믹스에서 SCSS 컴파일에 사용하는 scssphp라는 외부 라이브러리가 업데이트되면서 단위 혼용을 막아 버렸더군요. 원래 안 되는 건데 지금까지 봐준 거라나? 아무튼 막혀버렸습니다. ㅠ

     

    구버전 라이브러리는 최신 PHP 대응이 미흡하기 때문에, 라이믹스에서도 신버전을 사용할 수밖에 없습니다.

  • profile profile
    해당 라이브러리의 규정이라면 준수할 수 밖에 없어 보이네요. 다행히 calc는 ie에서도 지원되는 함수라 계산하는 부분은 전부 calc로 변경해버리면 될 것 같습니다.