FolEs
November 26, 2025 · View on GitHub
Linguagem de Folhas de Estilo em Português, para geração de CSS.
Acompanhe a Design Líquido nas redes sociais:
Motivação
Assim como linguagens de programação e de marcação, linguagens de estilo como CSS podem ser difíceis de aprender em português.
FolEs começa do mesmo ponto que SASS, como uma linguagem de extensão que gera CSS. A base de CSS é HTML. A base de FolEs é LMHT.
Adicionalmente, FolEs possui um recurso de tradução reversa. Em outras palavras, FolEs pode ingerir um arquivo CSS e devolver seu correspondente em FolEs.
Demonstração online
FolEs tem uma demonstração online juntamente com LMHT: https://designliquido.github.io/foles-demo-web.
Exemplos
Se queremos definir estilos para um documento inteiro, podemos usar:
lmht {
tamanho-fonte: 12px;
}
Isso traduz para o seguinte CSS:
html {
font-size: 12px;
}
Instalação
Para instalar FolEs globalmente, use o seguinte comando:
npm i -g @designliquido/foles
Execução
Após instalar globalmente pelo npm, para executar FolEs traduzindo um arquivo chamado exemplo.foles, use:
foles exemplo.foles
Para tradução reversa:
foles exemplo.css
VSCode
No Visual Studio Code, adicione no seu launch.json o seguinte:
"configurations": [
{
"type": "node",
"request": "launch",
"name": "FolEs",
"skipFiles": ["<node_internals>/**", "node_modules/**"],
"cwd": "${workspaceRoot}",
"console": "integratedTerminal",
"args": [
"${workspaceFolder}${pathSeparator}execucao.ts",
"${workspaceFolder}${pathSeparator}exemplos${pathSeparator}exemplo.foles"
],
"runtimeExecutable": "node",
"runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"]
},
]
Arquitetura
FolEs copia vários elementos de Delégua, como um Lexador e um Avaliador Sintático, mas contém um elemento original (um Tradutor, que usa o retorno do Avaliador Sintático para gerar uma folha de estilo em CSS).
Seletores
Um seletor é uma expressão que encontra N elementos em um documento LMHT que possuem certas características, como por exemplo o nome de uma estrutura, um id, uma classe e atributos dessa estrutura. Por exemplo:
ligacao {
}
Encontra todas as estruturas de um documento LMHT cujo nome da estrutura seja ligação:
<lmht>
<cabeça>
</cabeça>
<corpo>
<ligacao destino="https://github.com/DesignLiquido">GitHub da Design Líquido</ligacao>
<ligacao destino="https://github.com/DesignLiquido/delegua">Linguagem Delégua</ligacao>
<ligacao destino="https://github.com/DesignLiquido/FolEs">Linguagem FolEs</ligacao>
</corpo>
</lmht>
Neste exemplo, portanto, irá encontrar três estruturas.
Podemos ainda selecionar por um identificador único:
#ligacao1 {
}
Para o exemplo modificado:
<lmht>
<cabeça>
</cabeça>
<corpo>
<ligacao id="ligacao1" destino="https://github.com/DesignLiquido">GitHub da Design Líquido</ligacao>
<ligacao id="ligacao2" destino="https://github.com/DesignLiquido/delegua">Linguagem Delégua</ligacao>
<ligacao id="ligacao3" destino="https://github.com/DesignLiquido/FolEs">Linguagem FolEs</ligacao>
</corpo>
</lmht>
Iremos encontrar uma estrutura. Ainda, podemos usar algo assim:
.minhaligacao {
}
E modificar o exemplo mais uma vez:
<lmht>
<cabeça>
</cabeça>
<corpo>
<ligacao classe="minhaligacao" destino="https://github.com/DesignLiquido">GitHub da Design Líquido</ligacao>
<ligacao classe="outraligacao" destino="https://github.com/DesignLiquido/delegua">Linguagem Delégua</ligacao>
<ligacao classe="minhaligacao" destino="https://github.com/DesignLiquido/FolEs">Linguagem FolEs</ligacao>
</corpo>
</lmht>
E encontraremos apenas duas das três estruturas.
Modificadores
Um modificador é toda e qualquer propriedade declarada no escopo de um seletor que irá causar uma modificação em estruturas de um documento. Voltando ao exemplo da seção anterior:
ligacao {
tamanho-fonte: 16px;
}
Se aplicamos este estilo ao documento do primeiro exemplo, todas as três estruturas receberão uma modificação de estilo, ou seja o tamanho da fonte (texto) passa a ter o tamanho de 16 pixels.
Atributos de Modificadores: Valores, Quantificadores e Qualitativos
FolEs trabalha com três conceitos de atributos em todas as etapas dos ciclos de ingestão de arquivos:
- Valores: são os atributos que acompanham modificadores. No exemplo
tamanho-fonte: 16px;,tamanho-fonteé o modificador, e16pxé o valor. Valores podem ser formados por números absolutos, números acompanhados de quantificadores, quantitativos ou ainda uma combinação de todos esses; - Quantificadores: são complementos de valores. No exemplo anterior,
pxé o quantificador, e acompanha o número16, a parte numérica do valor; - Qualitativos: são valores adjetivos. Nem todo valor é expresso por um número e uma unidade de medida. Explorando um outro exemplo:
ligacao {
estilo-contorno: pontilhado;
}
estilo-contorno é um modificador que pede um qualitativo. pontihado é um qualitativo.
Mapeamentos
Recursos para desenvolvedores
Alguns sites são fundamentais para entender a implementação feita aqui:
- https://sokra.github.io/source-map-visualization/#custom
- https://evanw.github.io/source-map-visualization
- https://lachlan-miller.me/articles/decoding-variable-length-quantity-vlq-for-source-maps