Design mit variabler Breite in Einstellungen

UX
1

Hallo!

I’ve made a theme (css only) with a variable width.
Now I think about to share it, but not every one wants the variable width. So my consideration was to use variables to set the width inside the theme settings.
I know I need a settings.yamlwith e.g. this code:

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"

Now I’m not a specialist with CSS so I don’t know how to use these variables inside of SCSS.
Do I need a function for these settings?
Can someone give me an example on how to set the value for the header for example?

Thank you!

2

In the CSS you can use something like this
#{$header_width} .

Check this topic:

1 „Gefällt mir“
3

Thank you for the link!

Is it really that easy!? :+1:

So, one more question.
As width you can set px or %, so my variables need to be a string as data type?
But how can I prevent such inputs like 1100 apples?

I have a better idea with int and enum!

Thank you!

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“