SCSS

Generatore di immagini di codice SCSS

Trasforma gli snippet SCSS in immagini che vale la pena condividere, senza uscire dal tuo Mac.

SCSS is usually screenshotted to show nesting or a mixin, both of which are structural — and structure survives being an image much better than it survives being pasted.

Codeshot riconosce SCSS dal codice che incolli, quindi non c’è nessun selettore di linguaggio da sbagliare. Ecco lo stesso snippet in tre dei 30 temi inclusi, resi con i fogli di stile dell’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;
  }
}
Atom One · scuro
@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;
  }
}
GitHub · scuro
@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;
  }
}
Panda Syntax · scuro

Scegliere un tema per SCSS

Nesting depth is the message. Keep it to three levels in frame, and let the indentation carry the explanation.

Azzeccare la misura

Lascia che l’immagine segua il contenuto o bloccala su un rapporto — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 o 3:4 — poi esporta a 1×, 2× o 3× così resta nitida su uno schermo retina. Copiala negli appunti con C oppure salvala con S.

Guarda tutti i 30 temi a confronto oppure leggi il flusso completo.

Pensato per SCSS e altri 59 linguaggi

Tutto gira sul tuo Mac. Il tuo codice non lo lascia mai.

Scarica per macOS