Mixins API
SCSS-Mixin-Katalog (Varianten scss/sass/less) plus ein deterministischer CSS-clamp()-Generator – gib deiner Build-Pipeline oder deinem LLM-Agenten dieselben Antworten, die unsere Entwickler-Tools liefern.
Zwei überwiegend lesende Endpunkte, auf denen unsere eigenen Entwickler-Tools aufbauen: der SCSS-Mixin-Katalog (genutzt von /dev/scss-mixins) und die CSS-clamp()-Berechnung (genutzt von /dev/clamp-generator). So bekommen LLM-Agenten und CI-Skripte genau dieselben Antworten, die unsere Oberfläche zeigt – ohne die Seite zu scrapen.
# 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();Beide Endpunkte sind öffentlich und laufen in reinem PHP (kein Node / Python). Großzügige Limits, keine Kaltstarts.
# Anonymous limits (per IP):
# GET /dev/scss-mixins 60 req/min
# GET /dev/scss-mixins/{id} 60 req/min
# GET /dev/clamp 60 req/minKatalog aller Mixins, die wir anbieten – Bootstrap-Re-Exporte, unsere eigenen Projekt-Mixins, gängige Patterns und SCSS-Platzhalter. Filtere nach Gruppe, durchsuche id/title/description und entscheide, ob du nur Zusammenfassungen oder den vollständigen Quellcode willst.
https://jinero.online/api/v1/dev/scss-mixins
| Parameter | Typ | Beschreibung |
|---|---|---|
group |
string | Eine der Gruppen aus der Antwort (derzeit Bootstrap, Project, Pattern, Placeholder). Groß-/Kleinschreibung beachten. |
search |
string | Unscharfe Teilstring-Suche in id, Titel, Kurz- und Langbeschreibung. |
fields |
string | summary (Standard – ohne Quellcode, kleinere Antwort) oder full (inklusive 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"
}
]
}Vollständiger Quellcode eines Mixins in scss-, sass- und less-Syntax, dazu ein kurzes Demo-Snippet, das die Verwendung zeigt. Ideal für einen Agenten, der ein Mixin direkt in ein Projekt einfügen soll.
https://jinero.online/api/v1/dev/scss-mixins/{id}
| Parameter | Typ | Beschreibung |
|---|---|---|
id |
string (path) | Mixin-id aus der Listenantwort (Slug in kebab-case, z. B. "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"
}
}Berechnet ein fluid skalierendes clamp() für Typografie oder Abstände. Liefert den CSS-String samt zugrunde liegender Mathematik (Steigung, Achsenabschnitt, vw-Koeffizient), sodass du das Ergebnis in CSS- wie in SCSS-Pipelines verwenden kannst. Die Berechnung ist byte-identisch mit unserem Web-Tool unter /dev/clamp-generator.
https://jinero.online/api/v1/dev/clamp
| Parameter | Typ | Beschreibung |
|---|---|---|
min_fs |
number | Mindestgröße in px (meist font-size, funktioniert aber für jede Länge). |
max_fs |
number | Maximalgröße in px. |
min_vw |
number | Viewport-Breite, bei der min_fs erreicht wird. Standard: 320. |
max_vw |
number | Viewport-Breite, bei der max_fs erreicht wird. Standard: 1440. Muss > min_vw sein. |
unit |
string | px, rem (Standard) oder both. Bestimmt, welche Variante das Feld css zurückgibt. |
root |
number | Root-font-size in px für die Umrechnung in rem. Standard: 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)"
}
}Standard-HTTP-Semantik. Fehler liefern JSON mit dem Feld "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." }Über die Dev API von jinero.online
Kostenlose REST-API mit Entwickler-Utilities – durchsuchbarer SCSS-Mixin-Katalog mit Varianten in scss/sass/less und deterministische CSS-clamp()-Berechnung für fluide Typografie und Abstände.
Mixin-Katalog als API
Jedes Mixin unserer SCSS-Bibliothek – Bootstrap-Re-Exporte, Projekt-Utilities, Design-Patterns, Platzhalter – als JSON mit id, Gruppe, durchsuchbaren Feldern und vollständigem Quellcode.
scss · sass · less
Jedes Mixin kommt in drei Syntaxen zurück. Nimm die, die deine Build-Pipeline erwartet – ohne manuelles Umschreiben.
Deterministische clamp-Berechnung
Die clamp()-Berechnung ist reines PHP und identisch mit der JS-Implementierung, die unsere Oberfläche /dev/clamp-generator nutzt – gleiche Rundung, gleiche Ausgabe-Strings.
Kein Build-Schritt nötig
Beide Endpunkte sind überwiegend lesend, reines PHP, kein Node oder Python im Spiel – schnelle erste Antwort und vorhersehbare Kosten.
Häufig gestellte Fragen
Nein. Beide Endpunkte sind öffentlich und auf 60 Anfragen/min pro IP begrenzt. Wenn du für Batch-Jobs mit Agenten höhere Limits brauchst, registriere dich und hol dir ein Token.
Es sind mitgelieferte JSON-Kataloge unter storage/app/mixins/ – bootstrap.json, project.json, project-extra.json, patterns.json, placeholders.json. Neue Mixins lassen sich derzeit nur durch Bearbeiten dieser Dateien (und ein erneutes Deployment) hinzufügen; falls Beiträge von Nutzern ein Thema werden, verlagern wir sie eventuell später in die Datenbank.
Ein vollständiger Katalog mit scss/sass/less-Quellcode für 27 Mixins ist ~80 KB groß. Die meisten Clients brauchen nur den Index für die Navigation und rufen die Mixins dann einzeln ab. Übergib fields=full, wenn du alles mit einer einzigen Anfrage willst.
Ja – slope = (maxFs - minFs) / (maxVw - minVw); intercept = minFs - slope * minVw; clamp(minFs, intercept + slope*100vw, maxFs). Die rem-Variante berechnen wir relativ zu root (Standard: 16px). Nachgestellte Nullen werden für bessere Lesbarkeit aus den Ausgabe-Strings entfernt.
Das Web-Tool bietet einen Wrapper als SCSS-Funktion, die API liefert aber den reinen CSS-clamp()-Ausdruck – wenn du eine SCSS-Funktion brauchst, umschließe ihn clientseitig. Bei Bedarf ergänzen wir eventuell ein Feld scss_fn.