SCSS
Transforme trechos de SCSS em imagens que valem a pena compartilhar, sem sair do seu Mac.
SCSS costuma ser mostrado para explicar aninhamento ou um mixin, ambos estruturais — e estrutura sobrevive muito melhor a virar imagem do que a ser colada como texto.
O Codeshot detecta SCSS 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.
@mixin card($radius: 14px) {
border-radius: $radius;
box-shadow: 0 18px 40px rgba(23, 23, 32, 0.12);
}
.snapshot {
@include card;
&__caption {
color: var(--muted);
font-size: 0.8rem;
}
}@mixin card($radius: 14px) {
border-radius: $radius;
box-shadow: 0 18px 40px rgba(23, 23, 32, 0.12);
}
.snapshot {
@include card;
&__caption {
color: var(--muted);
font-size: 0.8rem;
}
}@mixin card($radius: 14px) {
border-radius: $radius;
box-shadow: 0 18px 40px rgba(23, 23, 32, 0.12);
}
.snapshot {
@include card;
&__caption {
color: var(--muted);
font-size: 0.8rem;
}
}A profundidade do aninhamento é a mensagem. Mantenha três níveis no enquadramento e deixe a indentação carregar a explicação.
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.
Tudo roda no seu Mac. Seu código nunca sai dele.