Tema com largura variável dentro das configurações

Experiência do Usuário
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 curtida
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

Olá novamente!

Quero adicionar configurações ao meu tema, mas tenho algumas perguntas sobre isso.

Analisei o componente welcome-banner porque há uma configuração para fazer upload de uma imagem como plano de fundo e outras configurações relacionadas ao plano de fundo.

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 a propriedade CSS background-size do ...<a/>

E no arquivo CSS está isto:

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

O que me incomoda agora é o uso de # em vez de $ como em outros componentes que analisei.
Então, o que preciso usar? Ou não faz diferença?

Tenho outra pergunta sobre CSS, mas primeiro quero resolver a questão acima.
Claro que poderia tentar, mas quero ter certeza de qual é o correto.

5

#{...} é interpolação scss:

Minha suposição é que é necessário em alguns dos exemplos que você compartilhou porque todas as configurações de tema são variáveis ‘string’. A interpolação permite que essas strings sejam usadas em locais que normalmente exigiriam um tipo de variável específico. Em muitos casos, porém, você provavelmente pode se safar apenas com $variável.

2 curtidas
6

Ok, eu entendo.
Então, se eu forçasse os usuários a usar a cor de fundo como RGB em vez de Hex, e escrevesse o # codificado no arquivo CSS, eu poderia usar $.

1 curtida