SCSS

SCSS 코드 스크린샷 생성기

Mac을 벗어나지 않고 SCSS 스니펫을 공유하고 싶은 이미지로 바꿔 보세요.

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은 붙여넣은 코드에서 SCSS을 판별하므로 언어 선택을 잘못할 일이 없습니다. 기본 제공되는 30가지 테마 가운데 세 가지로 같은 스니펫을, 앱 자체 스타일시트로 렌더링했습니다.

@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에 어울리는 테마 고르기

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

크기를 제대로 맞추기

이미지를 내용에 맞추거나 비율로 고정하세요 — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, 3:4 — 그런 다음 1×, 2×, 3× 중에서 골라 내보내면 레티나 화면에서도 또렷합니다. ⌘⇧C로 클립보드에 바로 복사하거나 ⌘S로 저장할 수 있습니다.

30가지 테마를 나란히 보기, 또는 전체 과정을 읽어 보세요.

SCSS을 비롯한 60개 언어를 위해

모든 작업이 Mac에서 이루어집니다. 코드가 밖으로 나가지 않습니다.

macOS용 다운로드