Variáveis

Variáveis permitem definir um bloco de componentes uma vez e reutilizá-lo em vários lugares da mesma página — inclusive como código exibido num @pre e como resultado visual renderizado, sem repetição.

O problema que variáveis resolvem

Imagine uma página de documentação que precisa mostrar um exemplo de código e, logo abaixo, o resultado visual desse mesmo código:

```seed
// Sem variáveis — você repete o bloco duas vezes:
@pre
  @button variant=primary
    Enviar
  @button variant=secondary
    Cancelar

@div class=mt-4
  @button variant=primary
    Enviar
  @button variant=secondary
    Cancelar
```

Com variáveis, você define o bloco uma vez e referencia onde precisar:

```seed
@@exemplo-botoes
  @button variant=primary
    Enviar
  @button variant=secondary
    Cancelar

@pre
  @@exemplo-botoes

@div class=mt-4
  @@exemplo-botoes
```

Sintaxe

Definindo uma variável

Use @@nome com filhos indentados. O bloco não gera nenhum HTML — é só uma definição:

```seed
@@minha-var
  @h1
    Título
  @p
    Descrição do componente.
```

Usando uma variável

Referencie @@nome sem filhos. O bloco é expandido no lugar:

```seed
@@minha-var
```

Pode usar quantas vezes quiser na mesma página:

```seed
@section
  @@minha-var

@aside
  @@minha-var
```

Dentro de @pre

Quando @@nome aparece dentro de um @pre ou @code, o bloco é serializado de volta para sintaxe .seed — os componentes aparecem como texto, não como HTML renderizado:

```seed
@@exemplo
  @h1 variant=muted
    Título
  @p
    Descrição.

@pre
  @@exemplo        ← exibe o código .seed

@@exemplo          ← renderiza o HTML
```

Resultado: o @pre mostra o código-fonte, e abaixo aparece o output visual — tudo a partir da mesma definição.

Exemplo completo: página de documentação de componente

Um padrão comum em páginas de cheatsheet ou documentação:

```seed
@@ex-badge
  @badge variant=success
    Ativo
  @badge variant=danger
    Erro
  @badge variant=neutral
    Pendente

@div class=mb-2 text-sm text-gray-500
  Código:
@pre
  @@ex-badge

@div class=mt-4
  @div class=mb-2 text-sm text-gray-500
    Resultado:
  @@ex-badge
```

Diferença em relação ao @include

Feito com ❤️ e Seed