Less

Gerador de imagens de código Less

Transforme trechos de Less em imagens que valem a pena compartilhar, sem sair do seu Mac.

Less snippets are usually shown to explain a mixin or a guard, both of which are easier to point at in an image than to describe.

O Codeshot detecta Less pelo código que você cola, então não há seletor de linguagem para errar. Aqui está o mesmo trecho em três dos 30 temas inclusos, renderizados com as folhas de estilo do próprio 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 · escuro
@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 · escuro
@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 · escuro

Escolhendo um tema para Less

Colour values and variables are the interesting part. A neutral theme keeps them legible rather than competing with them.

Acertando o tamanho

Deixe a imagem seguir o conteúdo ou fixe uma proporção — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 ou 3:4 — e exporte em 1×, 2× ou 3× para que continue nítida em telas retina. Copie direto para a área de transferência com C ou salve com S.

Veja os 30 temas lado a lado ou leia o fluxo completo.

Feito para Less e outras 59 linguagens

Tudo roda no seu Mac. Seu código nunca sai dele.

Baixar para macOS