SCSS
Turn SCSS snippets into images worth sharing, without leaving your 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 detects SCSS from the code you paste, so there is no language picker to get wrong. Here is the same snippet in three of the 30 themes it ships with, rendered with the app's own stylesheets.
@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;
}
}Nesting depth is the message. Keep it to three levels in frame, and let the indentation carry the explanation.
Let the image follow your content, or lock it to a ratio — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, or 3:4 — then export at 1×, 2×, or 3× so it stays sharp on a retina display. Copy it straight to the clipboard with ⌘⇧C, or save with ⌘S.
See all 30 themes side by side, or read the full workflow.
Everything runs on your Mac. Your code never leaves it.