SCSS

SCSSコードスクリーンショット生成

SCSSのスニペットを、Macから離れることなく共有したくなる画像に。

SCSS は入れ子かミックスインを見せるために使われることが多く、どちらも構造的です。構造は、貼り付けられるよりも画像になるほうがずっとよく残ります。

Codeshotは貼り付けたコードからSCSSを判別するので、言語の選び間違いは起きません。付属する30種類のうち3つのテーマで同じスニペットを、アプリ自身のスタイルシートで表示しています。

@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 · ダーク

@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 · ダーク

@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 · ダーク

SCSSに合うテーマ選び

入れ子の深さがメッセージです。枠内は 3 階層までに抑え、インデントに説明を任せてください。

サイズを正しく決める

画像サイズを内容に合わせるか、比率で固定します（1:1、4:3、3:2、16:9、9:16、2:3、3:4）。そのうえで1×・2×・3×から選んで書き出せば、Retinaディスプレイでも鮮明なままです。⌘⇧Cでクリップボードに直接コピー、または⌘Sで保存できます。

30種類のテーマを見比べるか、全体の流れをご覧ください。

SCSSと、ほかの59言語のために

すべてMac上で動作します。コードが外に出ることはありません。

ダウンロード