Design mit variabler Breite in Einstellungen

Beitragen UX
1

Hallo!

Ich habe ein Theme (nur CSS) mit variabler Breite erstellt.
Nun überlege ich, es zu teilen, aber nicht jeder möchte eine variable Breite. Meine Überlegung war daher, Variablen zu verwenden, um die Breite in den Theme-Einstellungen festzulegen.
Ich weiß, dass ich eine settings.yaml benötige, zum Beispiel mit diesem Code:

composer width:
  default: 1110
  type: integer
  description: "Setze die Breite des Composers"

header width:
  default: 1110
  type: integer
  description: "Setze die Breite des Headers"

Ich bin kein CSS-Spezialist und weiß daher nicht, wie ich diese Variablen in SCSS verwenden kann.
Brauche ich dafür eine Funktion?
Kann jemand ein Beispiel geben, wie man beispielsweise den Wert für den Header setzt?

Vielen Dank!

2

Im CSS können Sie so etwas wie
#{$header_width}
verwenden.

Schauen Sie sich dieses Thema an:

1 „Gefällt mir“
3

Danke für den Link!

Ist es wirklich so einfach!? :+1:

Also, noch eine Frage. Als Breite kannst du px oder % setzen, müssen meine Variablen also als Datentyp String sein? Aber wie kann ich Eingaben wie 1100 Äpfel verhindern?

Ich habe eine bessere Idee mit int und enum!

Vielen Dank!

4

Hallo nochmal!

Ich möchte meiner Theme Einstellungen hinzufügen, habe aber ein paar Fragen dazu.

Ich habe mir die welcome-banner-Komponente angesehen, da es dort eine Einstellung zum Hochladen eines Bildes als Hintergrund und andere Einstellungen bezüglich des Hintergrunds gibt.

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>

Und in der CSS-Datei steht Folgendes:

.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;
  }

Was mich jetzt irritiert, ist die Verwendung von # anstelle von $ wie in anderen Komponenten, die ich mir angesehen habe.
Was muss ich also verwenden? Oder spielt es keine Rolle?

Ich habe noch eine Frage zu CSS, aber zuerst möchte ich die obige Frage klären.
Natürlich könnte ich es ausprobieren, aber ich möchte sicher sein, was richtig ist.

5

#{...} ist SCSS-Interpolation:

Ich vermute, dass es in einigen der von Ihnen geteilten Beispiele erforderlich ist, da alle Theme-Einstellungen „String“-Variablen sind. Interpolation ermöglicht die Verwendung dieser Strings an Stellen, die normalerweise einen bestimmten Variablentyp erfordern würden. In vielen Fällen können Sie wahrscheinlich mit nur $variable auskommen.

2 „Gefällt mir“
6

Ok, ich verstehe.
Wenn ich die Benutzer also zwingen würde, die Hintergrundfarbe als RGB anstelle von Hex zu verwenden, und das # fest in die CSS-Datei schreiben würde, könnte ich $ verwenden.

1 „Gefällt mir“