SCSS
Convierte fragmentos de SCSS en imágenes que merece la pena compartir, sin salir de tu Mac.
El SCSS suele mostrarse para explicar un anidamiento o un mixin, ambos estructurales, y la estructura sobrevive mucho mejor a convertirse en imagen que a pegarse como texto.
Codeshot detecta SCSS a partir del código que pegas, así que no hay selector de lenguaje que puedas equivocar. Aquí tienes el mismo fragmento en tres de los 30 temas incluidos, renderizados con las hojas de estilo de la propia 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;
}
}La profundidad del anidamiento es el mensaje. Deja tres niveles en el encuadre y que la indentación cargue con la explicación.
Deja que la imagen siga a tu contenido o fíjala a una proporción — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 o 3:4 — y exporta a 1×, 2× o 3× para que se mantenga nítida en pantallas retina. Cópiala al portapapeles con ⌘⇧C o guárdala con ⌘S.
Mira los 30 temas comparados o lee el flujo completo.
Todo se ejecuta en tu Mac. Tu código nunca sale de ahí.