Tema con larghezza variabile nelle impostazioni

Contribuisci UX
1

Ciao!

Ho creato un tema (solo CSS) con una larghezza variabile.
Ora sto pensando di condividerlo, ma non tutti vogliono una larghezza variabile. Quindi ho pensato di utilizzare delle variabili per impostare la larghezza nelle impostazioni del tema.
So che mi serve un file settings.yaml con, ad esempio, questo codice:

composer width:
  default: 1110
  type: integer
  description: "Imposta la larghezza del compositore"

header width:
  default: 1110
  type: integer
  description: "Imposta la larghezza dell'intestazione"

Ora, non sono uno specialista di CSS, quindi non so come utilizzare queste variabili all’interno di SCSS.
Ho bisogno di una funzione per queste impostazioni?
Qualcuno può darmi un esempio su come impostare il valore per l’intestazione, per esempio?

Grazie!

2

Nel CSS puoi usare qualcosa del genere:
#{$header_width}.

Consulta questo argomento:

1 Mi Piace
3

Grazie per il link!

È davvero così semplice!? :+1:

Quindi, un’ultima domanda.
Poiché per la larghezza puoi impostare px o %, le mie variabili devono essere di tipo stringa?
Ma come posso evitare input come 1100 mele?

Ho un’idea migliore con int ed enum!

Grazie!

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