Esl 1.9.8 представляє Менеджер Глобальних Змінних, потужну нову функцію, яка дозволяє вам створювати, управляти та категоризувати всі ваші CSS змінні безпосередньо в модулі. Це спростить управління вашими CSS змінними та дозволить вам з легкістю застосовувати узгоджені дизайни у ваших проектах.
Доступ до менеджера змінних
Менеджер Глобальних Класів легко доступний: клацніть на іконку “CSS3” в панелі інструментів модуля або використовуйте CMD/CTRL + . для відкриття менеджера.
Ця дія запускає спливаюче вікно, в якому ви можете переключитися між управлінням глобальними класами та глобальними CSS змінними. Виберіть “Змінна”, щоб відкрити інтерфейс менеджера змінних (якщо не було вибрано раніше).
Для користувачів, які вважають за краще спрощений інтерфейс, менеджер класів може бути відключений в Esl > Налаштування > Загальні > Вимкнути менеджер глобальних змінних.
Професійні функціональні можливості
Створення та управління змінними
У Менеджері Глобальних Змінних користувачі можуть безперешкодно обробляти CSS змінні через єдиний інтерфейс, де вони можуть:
- Управління змінними: Створюйте нові CSS змінні або оновлюйте існуючі з настроюваними іменами та значеннями. Видаляйте змінні, які більше не потрібні.
- Пакетні дії: Коли вибрано дві або більше змінних, редактор дозволяє вам виконувати пакетні дії, такі як перейменування та дублювання. Ці дії включають можливість знаходити та замінювати рядки або додавати префікси чи суфікси до імен змінних. Однак важливо зазначити, що перейменування CSS змінної не автоматично оновлює її екземпляри по всьому вашому сайту.
- Категоризація змінних: Ви можете категоризувати змінні для кращого управління та впорядковувати змінні або категорії за допомогою перетягування для зручного структурованого відображення.
Можливості пошуку та сортування
У заголовку Менеджера Глобальних Змінних користувачі можуть фільтрувати змінні за:
- Включенням або виключенням конкретних рядків.
- Варіанти сортування: Алфавітне сортування змінних для кращої організації.
- Фільтрація за використанням: Легко переглядайте змінні, які “Використовуються на цій сторінці” або “Не використовуються на цій сторінці”.
Інтеграція вибору змінних у модулі
Новий “Вибір Змінних” тепер доступний при редагуванні налаштувань елементів у модулі.
Цей вибірник перераховує всі змінні, створені за допомогою Менеджера Глобальних Змінних, організовані за категоріями.
Клікнувши на змінну з_picker_, вона безпосередньо вставляється в обране налаштування. Спрощення за рахунок використання єдиних стилів для різних елементів та класів вашого веб-сайту.
Експорт та імпорт змінних
Менеджер глобальних змінних спрощує експорт та імпорт CSS змінних, що робить підтримку єдиної стилістичної структури в різних проектах Esl легшою.
Експорт змінних
Користувачі мають два варіанти експорту змінних:
1. Експорт всіх: Клікнувши кнопку “Експортувати” у верхній частині менеджера, користувачі можуть експортувати всі змінні, які в даний час керуються в системі, у вигляді JSON файлу.
2. Експорт вибраних: Користувачі також можуть вибрати конкретні змінні для експорту, вибравши їх і потім клікнувши на іконку “Експортувати вибрані” в заголовку стовпця змінних. Це дозволяє отримати більший контроль над тим, які змінні включені в експортований JSON файл.
Імпорт змінних
Імпорт змінних в Esl гнучкий і зручний для користувача, підходячи для різних сценаріїв:
Імпорт через JSON файл: У спливаючому вікні “Імпорт” користувачі можуть перетягувати і скидувати JSON файл, що містить експортні змінні, спрощуючи процес передачі налаштувань між проектами.
Ручний введення тексту: Крім того, ви можете вручну ввести змінні в текстову область. Це особливо корисно для швидкого імпорту змінних з дитячих тем, кастомних плагінів або фрагментів коду. Очікуваний формат для ручного введення – це список визначень CSS змінних, розділених крапкою з комою, наприклад:
--esl-color-primary: #ffd64f;--esl-color-secondary: #fc5778;--esl-text-dark: #212121;Імпорт з віддалених шаблонів: Коли вставляється віддалений шаблон, користувачі можуть вибрати, чи включати CSS змінні з віддаленого сайту. Цей варіант забезпечує, щоб імпортований шаблон зберігав свою заплановану естетичну узгодженість, або його можна адаптувати відповідно до місцевих стилістичних норм.