Mixins API
Catálogo de mixins SCSS (variantes scss/sass/less) y un generador determinista de CSS clamp(): dale a tu pipeline de compilación o a tu agente LLM las mismas respuestas que devuelven nuestras herramientas.
Dos endpoints, sobre todo de lectura, en los que se basan nuestras propias herramientas para desarrolladores: el catálogo de mixins SCSS (lo usa /dev/scss-mixins) y los cálculos de CSS clamp() (los usa /dev/clamp-generator). Pensados para que los agentes LLM y los scripts de CI obtengan exactamente las mismas respuestas que muestra nuestra interfaz, sin hacer scraping de la 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();Ambos endpoints son públicos y funcionan en PHP puro (sin Node / Python). Límites generosos y sin arranques en frío.
# 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 nuestros mixins: reexportaciones de Bootstrap, mixins propios del proyecto, patrones habituales y placeholders de SCSS. Filtra por grupo, busca en id/title/description y decide si quieres solo resúmenes o el código fuente completo.
https://jinero.online/api/v1/dev/scss-mixins
| Parámetro | Tipo | Descripción |
|---|---|---|
group |
string | Uno de los grupos que devuelve la respuesta (actualmente Bootstrap, Project, Pattern, Placeholder). Distingue mayúsculas y minúsculas. |
search |
string | Búsqueda aproximada de subcadenas en id, título, descripción breve y descripción larga. |
fields |
string | summary (predeterminado: sin código fuente, respuesta más ligera) o full (incluye 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 fuente completo de un mixin en sintaxis scss, sass y less, además de un breve fragmento de demostración para ver cómo se usa. Úsalo desde un agente que quiera añadir un mixin directamente a un proyecto.
https://jinero.online/api/v1/dev/scss-mixins/{id}
| Parámetro | Tipo | Descripción |
|---|---|---|
id |
string (path) | id del mixin, tomado de la respuesta de la lista (slug en kebab-case, p. ej. "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 un clamp() de escalado fluido para tipografía o espaciado. Devuelve la cadena CSS y los cálculos subyacentes (pendiente, intersección, coeficiente vw), así que puedes usar el resultado tanto en CSS como en SCSS. Los cálculos son idénticos byte a byte a los de nuestra herramienta web en /dev/clamp-generator.
https://jinero.online/api/v1/dev/clamp
| Parámetro | Tipo | Descripción |
|---|---|---|
min_fs |
number | Tamaño mínimo en px (normalmente font-size, pero sirve para cualquier longitud). |
max_fs |
number | Tamaño máximo en px. |
min_vw |
number | Ancho del viewport en el que se alcanza min_fs. Predeterminado: 320. |
max_vw |
number | Ancho del viewport en el que se alcanza max_fs. Predeterminado: 1440. Debe ser > min_vw. |
unit |
string | px, rem (predeterminado) o both. Determina qué variante devuelve el campo css. |
root |
number | font-size raíz en px para la conversión a rem. Predeterminado: 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 estándar. Los errores devuelven un JSON con el 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." }Acerca de la Dev API de jinero.online
API REST gratuita con utilidades para desarrolladores: un catálogo de mixins SCSS con búsqueda y variantes scss/sass/less, y cálculos deterministas de CSS clamp() para tipografía y espaciado fluidos.
Catálogo de mixins como API
Todos los mixins de nuestra biblioteca SCSS (reexportaciones de Bootstrap, utilidades del proyecto, patrones de diseño, placeholders) disponibles como JSON con id, grupo, campos aptos para búsqueda y el código fuente completo.
scss · sass · less
Cada mixin se devuelve en tres sintaxis. Elige la que espera tu pipeline de compilación, sin reescribir nada a mano.
Cálculos de clamp deterministas
Los cálculos de clamp() están escritos en PHP puro y son idénticos a la implementación en JS de nuestra interfaz /dev/clamp-generator: el mismo redondeo y las mismas cadenas de salida.
Sin paso de compilación
Ambos endpoints son sobre todo de lectura y funcionan en PHP puro, sin Node ni Python de por medio: primera respuesta rápida y un consumo de recursos predecible.
Preguntas frecuentes
No. Ambos endpoints son públicos y tienen un límite de 60 solicitudes/min por IP. Regístrate y obtén un token si necesitas límites más altos para trabajos por lotes con agentes.
Son catálogos JSON incluidos en storage/app/mixins/: bootstrap.json, project.json, project-extra.json, patterns.json, placeholders.json. Por ahora, la única forma de añadir mixins es editar esos archivos (y volver a desplegar); más adelante podríamos moverlos a la base de datos si llegan contribuciones de los usuarios.
Un catálogo completo con el código scss/sass/less de 27 mixins ocupa ~80 KB. La mayoría de los clientes solo quieren el índice para navegar y luego obtienen los mixins de uno en uno. Pasa fields=full si lo quieres todo en una sola solicitud.
Sí: slope = (maxFs - minFs) / (maxVw - minVw); intercept = minFs - slope * minVw; clamp(minFs, intercept + slope*100vw, maxFs). Calculamos la variante en rem en relación con root (predeterminado: 16px). En las cadenas de salida se eliminan los ceros finales para que sean más legibles.
La herramienta web ofrece un envoltorio como función SCSS, pero la API devuelve la expresión CSS clamp() sin procesar: si necesitas una función SCSS, envuélvela en el cliente. Puede que añadamos un campo scss_fn si hay demanda.