SCSS

Générateur d’images de code SCSS

Transformez vos extraits SCSS en images que l’on a envie de partager, sans quitter votre 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 détecte SCSS à partir du code que vous collez : aucun sélecteur de langage à se tromper. Voici le même extrait dans trois des 30 thèmes fournis, rendus avec les feuilles de style de l’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 · sombre
@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 · sombre
@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 · sombre

Choisir un thème pour SCSS

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

Trouver la bonne taille

Laissez l’image suivre votre contenu ou fixez un rapport — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 ou 3:4 — puis exportez en 1×, 2× ou 3× pour qu’elle reste nette sur un écran retina. Copiez-la dans le presse-papiers avec C ou enregistrez avec S.

Voyez les 30 thèmes côte à côte ou lisez le déroulé complet.

Conçu pour SCSS et 59 autres langages

Tout tourne sur votre Mac. Votre code ne le quitte jamais.

Télécharger pour macOS