Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Avocode
Webdesign

Как сгенерировать CSS-переменные с помощью Avocode 3

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Pembelight (you can also view the original English article)

В этом уроке я покажу, как создавать переменные CSS с помощью Avocode 3. Мы будем использовать дизайн, импортированный из программы для дизайна, таких как Adobe XD или Sketch.

Avocode 3 может генерировать переменные для препроцессоров (Sass, LESS, Stylus и т. д.), но ради простоты мы собираемся работать непосредственно с переменными для CSS. Мы создадим переменные для цветовой схемы нашего дизайна, шрифтов и некоторых параметров макета. Это те аспекты нашего продукта, которые больше всего подвергаются изменениям в будущем (создавать переменные для всех элементов не очень эффективно).

Avocode 3 и CSS-переменные

Мой новый курс сопровождается этим видео, а дизайн, взят из данного урока. Посмотрите эту статью, если хотите узнать больше о Avocode:

  • Adobe XD to Code и Avocode 3

Начинаем с цветовой схемы

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

swatches
Переключатели в Avocode
swatch name
Имя переключателя

В нашем выбранном образце вы увидите фактическое значение цвета, отображаемое в свойствах. В этом случае это #8b959d, поэтому выделите его и скопируйте.

Создайте переменную

Под выделенным значением вы увидите окно Variables. Нажмите кнопку +, чтобы добавить новую переменную.

В появившемся модальном окне вставьте значение цвета в поле Replaced Text. Затем в поле Variable Name введите имя переменной, которую вы хотите использовать. Теперь все найденные в дизайне значения цвета будут заменены на переменные.

Вы заметите, что мы использовали _color в конце нашей переменной строки. Это пригодится при кодировании в случае, если нам прийдется отличить один тип переменной от другого.

Вот так отображаются переменные после установки:

Другие переменные

Тот же процесс применяется и к другим переменным. Вы можете добавлять имена шрифтов, числовые значения, что угодно туда, где в первом примере мы использовали шестизначные значения цвета. Все они могут быть заменены переменными CSS.

Вы можете использовать переменные для большинства аспектов вашего CSS. Размеры, медиа-запросы, единицы измерения - решайте сами! Чтобы узнать больше, пересмотрите видео.

Экспортируйте код

Теперь самая важная часть этого урока: экспорт кода CSS, при котором наши переменные перенесутся в браузер. Когда все переменные готовы, на панели Variables нажмите кнопку Import/Export.

export code from avocode

В появившемся модальном окне перейдите на вкладку Export. Вы найдете все переменные, которые можно скопировать. После этого вставьте переменные в таблицу стилей, но убедитесь, что вы включили элемент :root, чтобы все переменные вложились таким образом:

Возможно вам будет лучше расположить переменные в этой таблице стилей таким образом, чтобы ими было легче управлять (например цвета с цветами, переменные шрифтов  и т. д.).

Итог

Вот так происходит генерация CSS-переменных из дизайна с помощью Avocode! Это гораздо быстрее, чем кодирование CSS-переменных вручную, поэтому я уверена, что вам понравится эта полезная функция.

Похожие статьи

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.