Mixins API
Catálogo de mixins SCSS (variantes scss/sass/less) e um gerador determinístico de CSS clamp() — dê ao seu pipeline de build ou agente LLM as mesmas respostas que as nossas ferramentas retornam.
Dois endpoints, principalmente de leitura, que alimentam as nossas próprias ferramentas para desenvolvedores: o catálogo de mixins SCSS (usado por /dev/scss-mixins) e o cálculo de CSS clamp() (usado por /dev/clamp-generator). Feitos para que agentes LLM e scripts de CI obtenham exatamente as mesmas respostas que a nossa interface mostra — sem scraping da página.
# List all mixins (summary, no source)
curl "https://jinero.online/api/v1/dev/scss-mixins"
# Fluid font-size clamp from 16px → 48px
curl "https://jinero.online/api/v1/dev/clamp?min_fs=16&max_fs=48"const r = await fetch("https://jinero.online/api/v1/dev/scss-mixins?group=Project&fields=summary");
const { items, groups, count } = await r.json();Os dois endpoints são públicos e em PHP puro (sem Node / Python). Limites generosos, sem cold starts.
# Anonymous limits (per IP):
# GET /dev/scss-mixins 60 req/min
# GET /dev/scss-mixins/{id} 60 req/min
# GET /dev/clamp 60 req/minCatálogo de todos os nossos mixins — reexportações do Bootstrap, mixins do próprio projeto, padrões comuns e placeholders SCSS. Filtre por grupo, busque em id/title/description e escolha se quer só os resumos ou o código-fonte completo.
https://jinero.online/api/v1/dev/scss-mixins
| Parâmetro | Tipo | Descrição |
|---|---|---|
group |
string | Um dos grupos retornados na resposta (atualmente Bootstrap, Project, Pattern, Placeholder). Diferencia maiúsculas de minúsculas. |
search |
string | Busca aproximada de substring em id, título, descrição curta e descrição longa. |
fields |
string | summary (padrão — sem código-fonte, resposta mais leve) ou full (inclui scss / sass / less / demo). |
# Only Project mixins, with full source
curl "https://jinero.online/api/v1/dev/scss-mixins?group=Project&fields=full"
# Search
curl "https://jinero.online/api/v1/dev/scss-mixins?search=clamp"const r = await fetch("https://jinero.online/api/v1/dev/scss-mixins?fields=full");
const { items } = await r.json();
// Build an in-memory index
const byId = Object.fromEntries(items.map(m => [m.id, m]));{
"success": true,
"count": 27,
"groups": ["Bootstrap", "Project", "Pattern", "Placeholder"],
"items": [
{
"id": "centerer",
"title": "centerer()",
"group": "Project",
"short": "Absolute centering helper with axis toggles.",
"desc": "A practical utility when you need a badge, dot, handle, or overlay element pinned to the real visual center.",
"url": "https://jinero.online/dev/scss-mixins#centerer"
}
]
}Código-fonte completo de um mixin nas sintaxes scss, sass e less, além de uma demonstração curta para visualizar o uso. Use em um agente que quer colocar um mixin direto em um projeto.
https://jinero.online/api/v1/dev/scss-mixins/{id}
| Parâmetro | Tipo | Descrição |
|---|---|---|
id |
string (path) | id do mixin, da resposta da lista (slug em kebab-case, ex.: "centerer", "media-breakpoint-up"). |
curl "https://jinero.online/api/v1/dev/scss-mixins/centerer"const r = await fetch("https://jinero.online/api/v1/dev/scss-mixins/centerer");
const { mixin } = await r.json();
navigator.clipboard.writeText(mixin.scss);{
"success": true,
"mixin": {
"id": "centerer",
"title": "centerer()",
"group": "Project",
"short": "Absolute centering helper with axis toggles.",
"desc": "...",
"scss": "@mixin centerer($horizontal: true, $vertical: true) {\n position: absolute;\n ...\n}",
"sass": "@mixin centerer($horizontal: true, $vertical: true)\n position: absolute\n ...",
"less": "...",
"demo": "centerer",
"url": "https://jinero.online/dev/scss-mixins#centerer"
}
}Calcula um clamp() de escala fluida para tipografia ou espaçamentos. Retorna a string CSS e a matemática por trás (inclinação, intercepto, coeficiente vw), para você usar o resultado em pipelines de CSS ou de SCSS. O cálculo é idêntico, byte a byte, ao da nossa ferramenta web em /dev/clamp-generator.
https://jinero.online/api/v1/dev/clamp
| Parâmetro | Tipo | Descrição |
|---|---|---|
min_fs |
number | Tamanho mínimo em px (geralmente font-size, mas funciona com qualquer comprimento). |
max_fs |
number | Tamanho máximo em px. |
min_vw |
number | Largura do viewport em que min_fs é atingido. Padrão 320. |
max_vw |
number | Largura do viewport em que max_fs é atingido. Padrão 1440. Deve ser > min_vw. |
unit |
string | px, rem (padrão) ou both. Define qual variante o campo css retorna. |
root |
number | font-size da raiz em px para a conversão em rem. Padrão 16. |
# 16px → 48px between 320 and 1440 viewports
curl "https://jinero.online/api/v1/dev/clamp?min_fs=16&max_fs=48"
# Spacing token with px output
curl "https://jinero.online/api/v1/dev/clamp?min_fs=24&max_fs=64&min_vw=480&max_vw=1920&unit=px"const r = await fetch("https://jinero.online/api/v1/dev/clamp?min_fs=16&max_fs=48");
const { css, variants } = await r.json();
document.documentElement.style.setProperty("--fluid-fs", variants.rem);$res = Http::get("https://jinero.online/api/v1/dev/clamp", [
"min_fs" => 16,
"max_fs" => 48,
]);
$css = $res->json("css");{
"success": true,
"inputs": {
"min_fs": 16, "max_fs": 48,
"min_vw": 320, "max_vw": 1440,
"root": 16, "unit": "rem"
},
"math": {
"slope": 0.028571,
"intercept_px": 6.8571,
"vw_coefficient": 2.8571
},
"css": "clamp(1rem, 0.4286rem + 2.8571vw, 3rem)",
"variants": {
"px": "clamp(16px, 6.8571px + 2.8571vw, 48px)",
"rem": "clamp(1rem, 0.4286rem + 2.8571vw, 3rem)"
}
}Semântica HTTP padrão. Os erros retornam JSON com o campo "message".
// 404 — mixin id not found
{ "message": "Mixin not found" }
// 422 — invalid clamp inputs (e.g. max_vw <= min_vw)
{ "message": "max_vw must be greater than min_vw." }
// 422 — invalid step (must be 5, 10, 20 or 25 — for shades only, not relevant here)
{ "message": "The selected step is invalid." }
// 429 — rate limit exceeded
{ "message": "Too Many Attempts." }Sobre a Dev API do jinero.online
API REST gratuita de utilitários para desenvolvedores — catálogo pesquisável de mixins SCSS com variantes scss/sass/less e cálculo determinístico de CSS clamp() para tipografia e espaçamentos fluidos.
Catálogo de mixins como API
Todos os mixins da nossa biblioteca SCSS — reexportações do Bootstrap, utilitários do projeto, padrões de design, placeholders — disponíveis em JSON, com id, grupo, campos para busca e código-fonte completo.
scss · sass · less
Cada mixin volta em três sintaxes. Escolha a que o seu pipeline de build espera, sem reescrever nada à mão.
Cálculo de clamp determinístico
O cálculo de clamp() é feito em PHP puro e é idêntico à implementação em JS da nossa interface /dev/clamp-generator — mesmo arredondamento, mesmas strings de saída.
Sem etapa de build
Os dois endpoints são principalmente de leitura, em PHP puro, sem Node nem Python no caminho — primeira resposta rápida e custo previsível.
Perguntas frequentes
Não. Os dois endpoints são públicos e limitados a 60 req/min por IP. Se precisar de limites maiores para trabalho em lote com agentes, crie uma conta e gere um token.
São catálogos JSON em storage/app/mixins/ — bootstrap.json, project.json, project-extra.json, patterns.json, placeholders.json. Por enquanto, a única forma de adicionar mixins é editar esses arquivos (e publicar de novo); talvez os levemos para o banco de dados no futuro, se contribuições de usuários passarem a existir.
Um catálogo completo, com o código scss/sass/less de 27 mixins, tem ~80 KB. A maioria dos clientes só quer o índice para navegar e depois busca um mixin de cada vez. Passe fields=full quando quiser tudo em uma única requisição.
Sim — slope = (maxFs - minFs) / (maxVw - minVw); intercept = minFs - slope * minVw; clamp(minFs, intercept + slope*100vw, maxFs). Calculamos a variante em rem em relação à raiz (padrão 16px). Os zeros à direita são removidos das strings de saída para facilitar a leitura.
A ferramenta web oferece um wrapper em forma de função SCSS, mas a API retorna a expressão CSS clamp() pura — se precisar de uma função SCSS, faça o wrapper no cliente. Podemos adicionar um campo scss_fn se houver demanda.