Расширение Live editor for CSS and LESS — Magic CSS
4.2 / 5
Всего оценок: 10Run this extension and start writing your CSS/LESS code which gets applied immediately. The code you write will be saved in your browser’s local storage at site level.
Featuring:
* Live editor for CSS/LESS code — Preview changes as you write code
* Syntax Highlighting
* Auto-generate CSS selectors with point-and-click
* Autocomplete for CSS selectors, properties and values
* Emmet support helps in quickly expanding abbreviations to CSS code (https://docs.emmet.io/css-abbreviations/)
* Color picker (supports HEX, RGB, RGBA, HSL and HSLA)
* Convert code from LESS to CSS
* Beautify / Format code
* Minify code
* Highlight DOM elements matching the CSS selectors
* CSS reloader
* Lint CSS code
* Create GitHub Gist & E-mail
Open source:
* https://github.com/webextensions/live-css-editor
This extension is available for:
* Google Chrome
* Microsoft Edge
Visit https://webextensions.
org/ for further detailsCreated by:
* Priyank Parashar
Uses:
* No need to refresh pages to test your CSS/LESS code
* Speed-up development and testing of your styling code by doing it directly on your page
* Develop and test your code before finalizing your changes into the project files
* Apply some temporary styles (like hiding some components)
* Reload CSS resources without refreshing the page
* Test styling changes even when you cannot modify the original source code
Notes:
* The CSS/LESS code you write gets applied as you write it
* With this styling code tester, you can develop and test the code at the same time
* The code is saved in browser as soon as you write it
* The code editor is resizable and draggable
* The code you write is auto-saved at site level and can be used again for same or different pages
* You can use «TAB» key to indent your code
* Press «Esc» or click on close to hide it and run it again to continue making changes
* The code you write is added at the bottom of the <body> tag of the active page
* It includes CSS/LESS beautifier and minifier
* It highlights the DOM elements matching the CSS selectors
* Use it along with your favorite Chrome/Edge/Firefox Developer tools
* You might find it useful in creating your custom themes for websites based on Stylish / Stylist
* This extension is also known as «MagiCSS — Live CSS Editor»
Credits for open source code and services used by this extension:
* Amplify JS
* Browserify
* Code Mirror
* codemirror-colorpicker by easylogic @ GitHub
* Emmet codemirror-plugin by emmetio @ GitHub
* CSS Pretty
* CSSLint
* GitHub Gist
* jQuery
* jQuery UI
* Less
* Mozilla Source Map
Inspirations:
* «Auto-generate CSS selectors with point-and-click» feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot
Connect to us at:
* https://webextensions.
org/
* https://github.com/webextensions/live-css-editor
* https://twitter.com/webextensions
* Priyank Parashar — https://linkedin.com/in/ParasharPriyank/
- У этого расширения есть доступ к вашим данным на всех сайтах.
Снимок экрана
Добавить в OperaО расширении
- Загрузки
- 13 064
- Категория
- Инструменты разработчика
- Версия
- 6.2.12
- Размер
- 423,1 КБ
- Обновлено
- 24 октября 2017 г.
- Лицензионное соглашение
- Cайт службы
- https://webextensions.org
- Страница поддержки
- https://github.com/webextensions/live-css-editor/issues
- Страница исходного кода
- https://github.com/webextensions/live-css-editor
Отзывы пользователей
Please enable JavaScript to view comments
Тренажер и курс по работе с Emmet от epixx.
github.ioТренажер для работы с Emmet от epixx.github.io
Другие обучающие проекты для работы с Emmet
Вы не знаете что такое Emmet?
Использование Emmet
Emmet это плагин для многих популярных текстовых редакторов, который значительно улучшает рабочий процесс HTML и CSS.
В основном, большинство текстовых редакторов позволяют вам хранить и повторно использовать часто используемые фрагменты кода, так называемыми «фрагментами». Хотя фрагменты кода являются хорошим способом повысить производительность, все реализации имеют общие побочные эфекты: сначала нужно определить фрагмент, но нельзя расширять его во время выполнения.
Emmet выводит идею фрагментов на совершенно новый уровень: вы можете вводить CSS-подобные выражения, которые можно динамически анализировать, и выводить их в зависимости от того, что вы вводите в сокращении. Emmet разработан и оптимизирован для веб-разработчиков, чей рабочий процесс зависит от HTML XML и CSS, но также Emmet это плагин для многих популярных текстовых редакторов, который значительно улучшает рабочий процесс HTML и CSS.
Тренажер для работы с Emmet от epixx.github.io
Перейти и потренироваться https://epixx.github.io/emmet/
Основная цель данной статьи познакомить Вас с отличным сервисом, который поможет Вам повысить Ваш скил при работе с Emmeт снипетами (фрагментами кода).
Другие обучающие проекты для работы с Emmet
Есть также много других фантастических обучающих программ онлайн. Большинство фокусируется на использовании Emmet в контексте веб-дизайна и разработк. Вот несколько из лучших:
- Прохладный и легкий HTML со статьей Emmet от Atomic Object
- Эммет (это круто) скринкаст из CSS-хитрости
- Прощай, дзен-кодирование, привет, Эммет! статья из журнала Smashing Magazine
- Ускоренный рабочий процесс: освоение серии Emmet из SitePoint
Вы не знаете что такое Emmet?
Emmet – это бесплатная надстройка для вашего текстового редактора, которая позволяет вам вводить снипеты, которые затем превращаются в полные куски кода.
Используя Emmet, дизайнеры для работы с макетами электронной почты набирают меньше текста, экономя время и клавиши при создании очереднйо кампании. Кроме того, полагаться на автозаполнение Emmet означает меньше опечаток и пропущенных тегов, что приводит к более надежной верстке.
Emmet доступен для различных текстовых редакторов и встроен прямо в Litmus Builder. Популярный среди веб-дизайнеров, Emmet также популярен среди небольшого числа разработчиков макетов для электронной почты, особенно европейцев и маркетологов, которые пишут электронные письма с нуля. Например, 11% маркетологов в Европе и Великобритании и 13% тех, кто кодирует электронные письма с нуля, используют Emmet, согласно исследованию состояния рабочих процессов в электронной почте в 2018 году от litmus.com .
После установки Emmet позволяет печатать, используя сокращенный код, который следует тем же соглашениям, что и в HTML и CSS. Дизайнеры могут вводить имена элементов, добавлять идентификаторы и селекторы классов, а также использовать более продвинутые функции Emmet для ускорения процесса кодирования.
Они могут даже вкладывать элементы, используя те же селекторы дочерних и родственных элементов, что и в простом CSS, чтобы быстро создавать большие блоки кода.
Использование Emmet
Самый простой способ понять Эммет – это посмотреть на пример. Допустим, вам нужна таблица из трех строк, каждая из которых содержит ячейку таблицы с изображением над абзацем текста и ссылкой.
Выше наша желаемая структура.
Вместо того, чтобы вручную вводить – или копировать и вставлять – каждую строку, ячейку таблицы, изображение, абзац и тег ссылки, вы можете сократить это до одной строки и позволить Эммету выполнить большую часть работы за вас.
table>tr*3>td>img+p+a
После нажатия кнопки TAB, чтобы вызвать Emmet, одна строка кода выше раскрывается в полный HTML.
<table> <tr> <td> <img src="" alt="" /> <p></p> <a href=""></a> </td> </tr> <tr> <td> <img src="" alt="" /> <p></p> <a href=""></a> </td> </tr> <tr> <td> <img src="" alt="" /> <p></p> <a href=""></a> </td> </tr> </table>
Эта строка кода выглядит пугающей, но как только вы познакомитесь с синтаксисом Эммета, она станет второй натурой.
Давайте разберемся с этим.
Строка начинается с элемента таблицы, который сообщает Эммету, что первым раскрываемым элементом является таблица HTML. Используя дочерний селектор (>) и оператор умножения (*), мы сообщаем Emmet включить три строки таблицы в основную таблицу.
Затем мы добавляем еще один дочерний селектор, чтобы добавить ячейку таблицы в каждую строку таблицы. Внутри этих ячеек таблицы мы включаем изображение, абзац и тег привязки как братья и сестры (+) друг друга.
Для дизайнеров электронной почты, которые полагаются на атрибуты HTML для обеспечения согласованности между различными приложениями электронной почты, вы даже можете включить атрибуты, которые Emmet затем будет использовать в своем расширенном коде. Просто поместите ваши атрибуты и их значения в квадратные скобки, разделенные пробелами. Например, если мы хотим включить в таблицу cellpadding и cellspacing, мы бы написали:
table[cellpadding=0 cellspacing=0]
Emmet обладает множеством полезных функций, включая функции для группировки элементов, быстрой навигации, удаления тегов, слияния строк и даже добавления фиктивного текста.
Хотя здесь слишком много возможностей для обсуждения, электронная документация Emmet – отличное место, чтобы узнать больше.
Источник записи:
Emmet LiveStyle — первый двунаправленный инструмент редактирования в реальном времени для CSS, LESS и SCSS
Тайные сверхспособности
Приложение LiveStyle пока недоступно для вашей ОС, но вы можете попробовать установить его вручную.
Двунаправленный
Изменения передаются из редактора в браузер и из браузера в редактор.
Google Chrome
локальный хост:8080
Ayyo Movies запустила новый дизайн приложения Smart TV
Основная цель обновления — создать новый интерфейс к приложениям Smart TV, основанный на поведении пользователей в старой версии Ayyo, попутно изменив всю техническую подоплеку. Теперь вместо бесконечных окон с фильмами приложение состоит из четырех разделов, соответствующих четырем типам аудитории.
style.min.cssbody {
семейство шрифтов: с засечками;
цвет: #000синий;
фон: #fff;
отступ: 10px;
}
макет.
cssbody {
padding: 10px;
цвет: #000красный;
размер шрифта: 15 пикселей;
}
h2 {
размер шрифта: 3em;
}
One Heart
В LiveStyle вы подключаете таблицы стилей браузера к файлам из вашего редактора. Это дает вам непревзойденную гибкость: вы можете использовать файлы с жесткого диска, USB, FTP, сетевого подключения или даже новые, несохраненные файлы. макет.css usb/page.css ftp://css/forms.css smb://работа/cv.css без названияbody {
padding: 10px;
цвет: синий;
размер шрифта: 20px;
фон: темно-синий;
}
h2 {
размер шрифта: 3em;
}
Remote View
Remote View создает общедоступный URL-адрес, который указывает на ваш локальный веб-сайт. Используйте этот URL-адрес для предварительного просмотра локального веб-сайта на любом подключенном к Интернету устройстве или в любом браузере.
С мгновенными обновлениями в режиме реального времени из редактора и DevTools.
Ayyo Movies запустила новый дизайн приложения Smart TV
Основная цель обновления — создать новый интерфейс к приложениям Smart TV, основанный на поведении пользователей в старой версии Ayyo, одновременно изменив всю техническую подоплеку. Теперь вместо бесконечных окон с фильмами приложение состоит из четырех разделов, соответствующих четырем типам аудитории.
Другой браузер
Ayyo Movies запустила новый дизайн приложения Smart TV
Основная цель обновления — создать новый интерфейс к приложениям Smart TV, основанный на поведении пользователей в старой версии Ayyo с одновременным изменением всего технического фона . Теперь вместо бесконечных окон с фильмами приложение состоит из четырех разделов, соответствующих четырем типам аудитории.
Виртуальная машина
Ayyo Movies запустила новый дизайн приложения Smart TV
Основная цель обновления — создать новый интерфейс к приложениям Smart TV, основанный на поведении пользователей в старой версии Ayyo, попутно изменив всю техническую подоплеку.
Теперь вместо бесконечных окон с фильмами приложение состоит из четырех разделов, соответствующих четырем типам аудитории.
Планшеты
Ayyo Movies запустила новый дизайн приложения Smart TV
Основная цель обновления — создать новый интерфейс к приложениям Smart TV, основанный на поведении пользователей в старой версии Ayyo с одновременным изменением всех технических фон есть. Теперь вместо бесконечных окон с фильмами приложение состоит из четырех разделов, соответствующих четырем типам аудитории.
Мобильные телефоны
Google Chrome
localhost:8080
Ayyo Movies запустила новый дизайн приложения Smart TV
Основная цель обновление — для создания нового интерфейса к приложениям Smart TV, на основе поведения пользователей в старой версии Ayyo одновременно меняется вся техническая подоплека. Теперь вместо бесконечных окон с фильмами приложение состоит из четырех разделов, соответствующих четырем типам аудитории.
style.
min.css макет.cssbody {
цвет: синий;
размер шрифта: 20px;
фон: #ccc;
}
h2 {
размер шрифта: 3em;
}
Редактирование в реальном времени
LiveStyle сразу же обновляет CSS в браузере по мере ввода. Больше не нужно сохранять файлы или перезагружать страницу только для того, чтобы посмотреть, как одно обновление влияет на веб-страницу.
Браузер → Редактор
Вы когда-нибудь хотели настроить макет в DevTools и внести эти изменения в свой исходный код? LiveStyle — единственный инструмент, который может сделать это правильно. И это также работает с LESS и SCSS.
Используйте свои собственные инструменты
LiveStyle не требует для работы какого-либо специального инструмента сборки или веб-сервера. Он интегрируется непосредственно в ваш редактор и браузер. В настоящее время работает в Google Chrome и Sublime Text.
Плагин Atom доступен для бета-тестирования. Любой масштаб
LiveStyle предназначен для работы с проектами любого масштаба: от небольших одностраничных приложений до огромных веб-сайтов, таких как Facebook. И вы даже можете работать со своим живым веб-сайтом!
Простое кроссбраузерное тестирование
Благодаря функции удаленного просмотра вы можете легко просмотреть свой локальный веб-сайт в любом браузере и на любом устройстве, подключенном к Интернету. С оперативными обновлениями от редактора и DevTools.
Кроссплатформенный
LiveStyle работает везде, где есть ваш браузер и редактор.
Плагин Atom доступен для бета-тестирования. Скачать приложение
Приложение LiveStyle пока недоступно для вашей ОС, но вы можете попробовать установить его вручную.
Твитнуть
Поделиться
Плюс
Эммет | Документация PyCharm
На этой странице настройте параметры Emmet для файлов HTML, XML, JavaScript (JSX Harmony) и таблиц стилей.
PyCharm расширяет сокращения, только если их вывод не превышает 15 КБ.
Расширить аббревиатуру на | Из этого списка выберите клавишу по умолчанию, чтобы расширить селекторы Emmet. Этот ключ также по умолчанию расширяет живые шаблоны Emmet. |
Emmet.HTML
(0267 Ctrl+Alt+J ) URL-адрес с тегом 
jetbrains.com">https://www.jetbrains.com< /a> Emmet.
CSSВключить CSS Emmet | Установите этот флажок чтобы включить поддержку Emmet для таблиц стилей. Если этот флажок не установлен, сложные сокращения, такие как |
Включить нечеткий поиск среди сокращений CSS | Если этот флажок установлен, каждое неизвестное сокращение будет оцениваться по доступным именам шаблонов. Совпадение с лучшим счетом будет использоваться для разрешения шаблона. Например, если эта опция включена, следующие сокращения могут быть равны:
|
| 90 002 Включить расширение неизвестных свойств («неизвестно» до «неизвестно:;») |
|
Автоматическая вставка префиксов поставщиков CSS | Если этот флажок установлен, свойства CSS, перечисленные в таблице ниже, преобразуются в конструкции, которые содержат предшествующие префиксы поставщиков. Оставить комментарий
|
