Thème avec largeur variable dans les paramètres

Contribuer UX
1

Bonjour !

J’ai créé un thème (uniquement en CSS) avec une largeur variable.
Je pense maintenant à le partager, mais tout le monde ne souhaite pas une largeur variable. Ma réflexion était donc d’utiliser des variables pour définir la largeur dans les paramètres du thème.
Je sais que j’ai besoin d’un fichier settings.yaml avec, par exemple, ce code :

composer width:
  default: 1110
  type: integer
  description: "Définir la largeur du compositeur"

header width:
  default: 1110
  type: integer
  description: "Définir la largeur de l'en-tête"

Or, je ne suis pas spécialiste du CSS et je ne sais pas comment utiliser ces variables dans le SCSS.
Ai-je besoin d’une fonction pour ces paramètres ?
Quelqu’un pourrait-il me donner un exemple montrant comment définir la valeur pour l’en-tête, par exemple ?

Merci !

2

Dans le CSS, vous pouvez utiliser quelque chose comme ceci :
#{$header_width}.

Consultez ce sujet :

1 « J'aime »
3

Merci pour le lien !

C’est vraiment aussi simple ? :+1:

Donc, une dernière question.
Comme largeur, tu peux définir px ou %, donc mes variables doivent être de type chaîne de caractères ?
Mais comment puis-je empêcher des entrées comme 1100 pommes ?

J’ai une meilleure idée avec int et enum !

Merci !

4

Salut !

Je souhaite ajouter des paramètres à mon thème, mais j’ai quelques questions à ce sujet.

J’ai examiné le composant welcome-banner car il existe un paramètre pour télécharger une image en arrière-plan et d’autres paramètres liés à l’arrière-plan.

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: utilise la propriété CSS background-size de .....<a/>

Et dans le fichier CSS, il y a ceci :

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

Ce qui m’irrite maintenant, c’est l’utilisation de # au lieu de $ comme dans d’autres composants que j’ai consultés.
Alors, qu’est-ce que je dois utiliser ? Ou cela n’a-t-il pas d’importance ?

J’ai une autre question sur CSS, mais je veux d’abord résoudre la question ci-dessus.
Bien sûr, je pourrais essayer, mais je veux être sûr de ce qui est correct.

5

#{...} est une interpolation scss :

Je suppose que c’est nécessaire dans certains des exemples que vous avez partagés car tous les paramètres de thème sont des variables de type ‘string’. L’interpolation permet d’utiliser ces chaînes dans des endroits qui nécessiteraient normalement un type de variable spécifique. Dans de nombreux cas, cependant, vous pouvez probablement vous en sortir avec juste $variable.

2 « J'aime »
6

Ok, je comprends.
Donc, si je forçais les utilisateurs à utiliser la couleur d’arrière-plan en RVB au lieu de l’hexadécimal, et que j’écrivais le # en dur dans le fichier CSS, je pourrais utiliser $.

1 « J'aime »