Tema con larghezza variabile nelle impostazioni

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 Mi Piace
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

Ciao di nuovo!

Voglio aggiungere impostazioni al mio tema ma ho alcune domande al riguardo.

Ho esaminato il componente welcome-banner perché c’è un’impostazione per caricare un’immagine come sfondo e altre impostazioni relative allo sfondo.

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: usa la proprietà CSS background-size di .....</a>

E nel file css c’è questo:

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

Ciò che mi infastidisce ora è l’uso di # invece di $ come in altri componenti che ho esaminato.
Quindi cosa devo usare? O non fa differenza?

Ho un’altra domanda sul CSS, ma prima voglio risolvere la domanda di cui sopra.
Naturalmente potrei provarlo, ma voglio essere sicuro di quale sia la cosa corretta.

5

#{...} è l’interpolazione SCSS:

La mia ipotesi è che sia richiesta in alcuni degli esempi che hai condiviso perché tutte le impostazioni del tema sono variabili di tipo ‘stringa’. L’interpolazione consente di utilizzare tali stringhe in punti che normalmente richiederebbero un tipo di variabile specifico. In molti casi, tuttavia, probabilmente puoi cavartela con un semplice $variabile

2 Mi Piace
6

Ok, capisco.
Quindi se costringessi gli utenti a usare il colore di sfondo come RGB invece di Hex, e scrivessi il # codificato nel file CSS, potrei usare $.

1 Mi Piace