SCSS 색상 속성 변수로 인한 문제들

개발
1

어떤 코드 전문가가 이 코드에 대해 설명해 주실 수 있을까요? settings.yaml 파일의 내용과 관계없이 항상 오류가 발생하는 이유는 무엇인가요?

.d-header {
    background: rgba($header_color, $transparency);
}

그런데 이 코드는 오류가 발생하지 않습니다.

.d-header {
    background: rgba(darkslategrey, 0.5);
}

코드를 rgb(47, 79, 79) 형식의 $header_color로 변경하더라도 항상 $color 요소와 관련된 오류가 발생합니다. :thinking:

2

이렇게 하면 되나요?

$header_color: rgb(0,0,0);
$transparency: 0.5;

.d-header {
    background: rgba($header_color, $transparency);
}
3

네, 그런데 변수를 settings.yml 파일에 이렇게 넣으면 제 환경에서는 작동하지 않아요. 여기서는 $color 변수를 사용하지 않았는데도 $color is not a color라는 오류가 뜹니다. 그래서 제가 이해하지 못하는 보간(interpolation) 문제와 관련이 있을 것 같아요.

header_color:
  type: string
  default: ""
  description: 
    en: "..."
  
transparency:
  type: string
  default: ""
  description: 
    en: "..."

제 생각에는 이것이 CSS가 컴파일되는 방식과 관련이 있는 것 같아요. 변수는 CSS 런타임에 선언하면 작동하지만, 별도의 settings.yml 파일을 통해 동적으로 사용할 때는 작동하지 않아요. :thinking:

아래처럼 작성해도 작동하지 않습니다:

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
4

릴리님, 안녕하세요!

저도 얼마 전에 같은 문제에 부딪혔습니다. :smile:

간단한 답변: 테마와 CSS 변수는 문자열로 간주됩니다. color, background, border 등의 속성에서는 사용할 수 있지만, SCSS 색상 함수에서는 사용할 수 없습니다.

이 문제는 Discourse와 관련이 없습니다:

이 문제를 우회하는 다소 복잡한 방법이 하나 있지만, 저는 시도해 보지 않았습니다: Unquote not working on colour string · Issue #3006 · sass/sass · GitHub

5

릴리, 안녕! :wave:

설정에서 작동하려면 이 값들을 변수로 만들어야 해요. :slightly_smiling_face:

간단한 예시입니다:

6

정말 멋진데요, 감사합니다 @Don :slight_smile:

7

“불가능하다”고 말했는데 “가능하다”며 나오는 건 이번이 처음이 아니잖아, Don :smile:

아마 마지막도 아닐 거다 :see_no_evil: