@designliquido/foles
Advanced tools
Linguagem de folhas de estilo para documentos em geral em português
Linguagem de Folhas de Estilo em Português, para geração de CSS.
Acompanhe a Design Líquido nas redes sociais:
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.
Se queremos definir estilos para um documento inteiro, podemos usar:
lmht {
tamanho-fonte: 12px;
}
Isso traduz para o seguinte CSS:
html {
font-size: 12px;
}
Para instalar FolEs globalmente, use o seguinte comando:
npm i -g @designliquido/foles
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
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"]
},
]
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).
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.
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.
FolEs trabalha com três conceitos de atributos em todas as etapas dos ciclos de ingestão de arquivos:
tamanho-fonte: 16px;, tamanho-fonte é o modificador, e 16px é o valor. Valores podem ser formados por números absolutos, números acompanhados de quantificadores, quantitativos ou ainda uma combinação de todos esses;px é o quantificador, e acompanha o número 16, a parte numérica do valor;ligacao {
estilo-contorno: pontilhado;
}
estilo-contorno é um modificador que pede um qualitativo. pontihado é um qualitativo.
Alguns sites são fundamentais para entender a implementação feita aqui:
FAQs
Linguagem de folhas de estilo para documentos em geral em português
We found that @designliquido/foles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.