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

Contribuir Experiência do Usuário
1

Olá!

Criei um tema (apenas CSS) com largura variável.
Agora estou pensando em compartilhá-lo, mas nem todos desejam uma largura variável. Então, minha ideia foi usar variáveis para definir a largura nas configurações do tema.
Sei que preciso de um arquivo settings.yaml com, por exemplo, este código:

composer width:
  default: 1110
  type: integer
  description: "Defina a largura do compositor"

header width:
  default: 1110
  type: integer
  description: "Defina a largura do cabeçalho"

Agora, não sou especialista em CSS, então não sei como usar essas variáveis dentro do SCSS.
Preciso de uma função para essas configurações?
Alguém pode me dar um exemplo de como definir o valor para o cabeçalho, por exemplo?

Obrigado!

2

No CSS, você pode usar algo como
#{$header_width}.

Confira este tópico:

1 curtida
3

Obrigado pelo link!

É realmente tão fácil!? :+1:

Então, mais uma pergunta.
Como você pode definir largura em px ou %, minhas variáveis precisam ser do tipo string?
Mas como posso evitar entradas como 1100 apples?

Tenho uma ideia melhor com int e enum!

Obrigado!

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