Less

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

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

Less のコードはミックスインやガードの説明で使われることが多く、どちらも言葉にするより画像で指し示すほうが簡単です。

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

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }

Atom One · ダーク

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }

Edge · ダーク

@ink: #0d0d10;
@radius: 14px;

.card(@shadow: 0 18px 40px rgba(23, 23, 32, 0.12)) {
  border-radius: @radius;
  box-shadow: @shadow;
  color: @ink;
}

.snapshot { .card(); }

GitHub · ダーク

Lessに合うテーマ選び

色の値と変数が見どころです。落ち着いたテーマなら、それらと競わずに読みやすさを保てます。

サイズを正しく決める

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

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

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

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

ダウンロード