StyleClip - плагин Sketch, копирующий CSS стили элемента в буфер обмена

StyleClip – плагин Sketch, копирующий CSS стили элемента в буфер обмена

Проворный плагин Sketch, который позволяет копировать стили элемента непосредственно в буфер обмена Mac. Он поддерживает буферизацию необработанных стилей CSS, определений переменных SCSS и стилей с переменными SCSS.

StyleClip - плагин Sketch

Установка

Переместите StyleClip.sketchplugin в папку Plugins в Sketch или дважды кликните по файлу StyleClip.sketchplugin

Использование

Вы можете использовать плагин, выбрав StyleClip из раскрывающегося списка «Плагины» в строке меню или используя эти сочетания клавиш:

  • Cmd + shift + y: Clip Raw CSS Styles – Копировать CSS стили связанный с этим элементом
  • Cmd + shift + u: Clip SCSS Globals – Создать и скопировать цвета SCSS, используемые в текущем макете
  • Cmd + shift + i: Clip SCSS Styles – Копировать стили SCSS, связанные с этим элементом

Убедитесь, что при использовании этого плагина вы выбираете корневой (нижний) элемент, содержащий все стили, которые вы хотите скопировать. При выборе слоев (папки с контентом) нужные вам стили могут не скопироваться.

Информация

SCSS формат

  • Переменные SCSS написаны прописными буквами
  • RGBA цвета ставятся в конец с тире и значением их непрозрачности, указанном в процентах. Например, $WHITE-80: rgba(255,255,255,0.80);
  • Цвета, которые занимают одну и ту же переменную из-за очень близкого шестнадцатеричного значения, ставятся в конец с индексом, основанным на их порядке в документе цвета. Например:

$TURQUOISE-BLUE: #5BDCE6;
$TURQUOISE-BLUE1: #5CDCE6;
$TURQUOISE-BLUE2: #5DDCE6;

Если у вас есть другие настройки SCSS, не стесняйтесь развивать этот плагин и адаптировать его к вашим собственным потребностям.

Благодарности

Этот проект был вдохновлен желанием уменьшить число нажатий клавиш, необходимых при переходе от макетов Sketch к SCSS, особенно когда приходится повторно ссылаться на цвета и переменные,, потому что забыли их имена.

Не стесняйтесь писать автору в твиттер @liawesomesaucer, если у вас есть вопросы или предложения.

Спасибо проекту Chirag Mehta Name that Color Javascript за функциональность именования цветов.

0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Презентации в Sketch: быстро и удобно с Magic Presenter
Подробнее

Презентации в Sketch: быстро и удобно с Magic Presenter

Я думаю, что дизайн и создание презентаций должны производиться в едином процессе. Поэтому было разработано расширение Magic Presenter для Sketch. С возможностью разработки презентации прямо в Sketch ваш дизайн и есть ваши слайды.
Disconnect для Sketch
Подробнее

Disconnect для Sketch – отключает / деактивирует все символы или общие стили из выделения

После разработки пары плагинов для Sketch, я решил, что настало время переходить на новый уровень. Это мой пятый или шестой плагин, но ни один из них не обладал своим уникальным интерфейсом, так что на этот раз я хотел, чтобы мое творение выглядело особенно.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share