設定内の可変幅を持つテーマ

貢献 UX
1

こんにちは！

変数幅を持つテーマ（CSS のみ）を作成しました。
これを共有しようと考えていますが、変数幅を必要としないユーザーもいます。そのため、テーマ設定内で変数を使って幅を設定することを検討しています。

そのためには、settings.yaml に以下のようなコードが必要だと理解しています：

composer width:
  default: 1110
  type: integer
  description: "コンポーザーの幅を設定"

header width:
  default: 1110
  type: integer
  description: "ヘッダーの幅を設定"

しかし、私は 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の補間です。

共有された例のいくつかにそれが必要なのは、すべてのテーマ設定が「文字列」変数であるためだと推測します。補間により、通常は特定の変数型を必要とする場所でそれらの文字列を使用できます。ただし、多くの場合、単に$variableで済む可能性があります。

「いいね！」 2
6

Ok、わかりました。
もしユーザーに16進数ではなくRGBで背景色を使用するように強制し、CSSファイルに「#」をハードコーディングした場合、$を使用できるということですね。

「いいね！」 1