설정 내 가변 폭 테마

기여 UX
1

안녕하세요!

변수 폭을 가진 테마(CSS만)를 만들었습니다.
이제 이를 공유하려고 하는데, 모든 사람이 변수 폭을 원하지는 않을 것 같습니다. 그래서 테마 설정 내에서 폭을 설정하기 위해 변수를 사용하려고 고민하고 있습니다.
예를 들어 이 코드가 포함된 settings.yaml 파일이 필요하다는 것은 알고 있습니다:

composer width:
  default: 1110
  type: integer
  description: "Set the width of the composer"

header width:
  default: 1110
  type: integer
  description: "Set the width of the header"

저는 CSS 전문가가 아니어서 SCSS 내에서 이 변수들을 어떻게 사용해야 하는지 모르겠습니다.
이 설정을 위해 함수가 필요한가요?
예를 들어 헤더 값을 설정하는 방법에 대한 예시를 보여줄 수 있는 분이 있을까요?

감사합니다!

2

CSS에서는 다음과 같은 것을 사용할 수 있습니다
#{$header_width} .

이 주제를 확인해 보세요:

1개의 좋아요
3

링크 주셔서 감사합니다!

정말 그렇게 쉬운 건가요!? :+1:

그럼, 하나 더 질문할게요.
너비에는 px나 %를 설정할 수 있으므로, 제 변수의 데이터 타입은 문자열이어야 하나요?
그런데 1100 apples 같은 입력은 어떻게 방지할 수 있을까요?

int와 enum을 사용하는 더 좋은 아이디어가 생겼습니다!

감사합니다!

4

다시 인사드립니다!

테마에 설정을 추가하려고 하는데 몇 가지 질문이 있습니다.

배경으로 이미지를 업로드할 수 있는 설정과 배경과 관련된 기타 설정이 있어서 welcome-banner 컴포넌트를 살펴봤습니다.

banner_background_image:
  type: upload
  default: ""

banner_background_repeat:
  type: enum
  default: no-repeat
  choices:
    - no-repeat
    - repeat
    - repeat-x
    - repeat-y

banner_background_size:
  type: string
  default: cover
  description: uses ..... CSS background size property</a>

그리고 css 파일에는 다음과 같은 내용이 있습니다:

.welcome-link-banner-wrapper {
    background-color: #{$banner-background-color};
    background-image: url(#{$banner-background-image});
    background-size: #{$banner-background-size};
    background-repeat: #{$banner-background-repeat};
    background-position: center center;
  }

지금 제가 당혹스러운 점은 다른 컴포넌트에서는 $를 사용하는데, 여기서는 #이 사용되고 있다는 것입니다.
그래서 저는 무엇을 사용해야 하는 걸까요? 아니면 상관없는 건가요?

CSS에 대해 또 다른 질문이 있지만, 우선 위 질문을 해결하고 싶습니다.
물론 직접 시도해볼 수도 있지만, 어떤 것이 올바른지 확실하게 알고 싶습니다.

5

#{...}는 SCSS 보간(interpolation)입니다:

제가 추측하기로는, 공유해 주신 예제 중 일부에서는 모든 테마 설정이 ‘string’ 변수이기 때문에 보간이 필요한 것 같습니다. 보간을 사용하면 특정 변수 타입이 필요한 위치에 문자열을 사용할 수 있습니다. 하지만 많은 경우 단순히 $variable만으로도 충분할 수 있습니다.

2개의 좋아요
6

네, 이해했습니다.
즉, 사용자가 배경색을 Hex 대신 RGB로 사용하도록 강제하고, #를 CSS 파일에 하드코딩한다면 $를 사용할 수 있다는 뜻이군요.

1개의 좋아요