Less

Less Code-Screenshot-Generator

Verwandle Less-Snippets in Bilder, die man gerne teilt — ohne deinen Mac zu verlassen.

Less-Snippets werden meist gezeigt, um ein Mixin oder einen Guard zu erklären — beides zeigt man leichter im Bild, als man es beschreibt.

Codeshot erkennt Less an dem Code, den du einfügst; es gibt also keine Sprachauswahl, die man falsch treffen kann. Hier ist dasselbe Snippet in drei der 30 mitgelieferten Themes, gerendert mit den Stylesheets der App.

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }

Atom One · dunkel

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }

Edge · dunkel

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }

GitHub · dunkel

Das passende Theme für Less

Farbwerte und Variablen sind der interessante Teil. Ein neutrales Theme hält sie lesbar, statt mit ihnen zu konkurrieren.

Die richtige Größe

Lass das Bild dem Inhalt folgen oder lege es auf ein Verhältnis fest — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 oder 3:4 — und exportiere dann mit 1×, 2× oder 3×, damit es auf Retina-Displays scharf bleibt. Kopiere es mit ⌘⇧C direkt in die Zwischenablage oder sichere mit ⌘S.

Sieh dir alle 30 Themes im Vergleich an oder lies den kompletten Ablauf.

Gebaut für Less und 59 weitere Sprachen

Alles läuft auf deinem Mac. Dein Code verlässt ihn nie.

Laden