SCSS

Генератор изображений кода SCSS

Превращайте фрагменты SCSS в изображения, которыми хочется делиться, не покидая 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 определяет 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×, чтобы изображение оставалось чётким на retina-экране. Скопируйте его в буфер обмена сочетанием C или сохраните через S.

Посмотрите все 30 тем рядом или прочитайте весь процесс.

Сделано для SCSS и ещё 59 языков

Всё работает на вашем Mac. Код никогда его не покидает.

Скачать для macOS