Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/webextensions/live-css-editor

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)
https://github.com/webextensions/live-css-editor

chrome-extension css editor firefox-addon javascript less sass

Last synced: about 1 month ago
JSON representation

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Host: GitHub
URL: https://github.com/webextensions/live-css-editor
Owner: webextensions
License: mit
Created: 2017-04-06T20:14:14.000Z (over 7 years ago)
Default Branch: main
Last Pushed: 2024-07-28T09:25:06.000Z (4 months ago)
Last Synced: 2024-09-29T18:02:19.645Z (about 1 month ago)
Topics: chrome-extension, css, editor, firefox-addon, javascript, less, sass
Language: JavaScript
Homepage: https://chromewebstore.google.com/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol
Size: 14.8 MB
Stars: 275
Watchers: 21
Forks: 58
Open Issues: 33
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Live editor for CSS, Less & Sass (Magic CSS)
Extension **Live editor for CSS, Less & Sass** *(Magic CSS)* for Google Chrome, Microsoft Edge, Mozilla Firefox and Opera.

https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol

https://microsoftedge.microsoft.com/addons/detail/live-editor-for-css-less/ahibbdhoijcafelmfepfpcmmdifchpdg

https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/

https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/

**Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, convert Less/Sass to CSS, beautify, minify, CSS reloader, linter, ...**

Run this extension and start writing your CSS/Less/Sass code which gets applied immediately. The code you write will be saved in the browser extension's storage space or the site's local storage.

**Featuring:**
* Live editor for CSS/Less/Sass code - Preview changes as you write code
* Live edit CSS files and auto-save on file system
* CSS reloader
* Option to reapply styles automatically
* 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/Sass to CSS
* Beautify / Format code
* Minify code
* Highlight DOM elements matching the CSS selectors
* Option to load this extension in iframes as well
* Lint CSS code

**Open source:**
* https://github.com/webextensions/live-css-editor

**This extension is available for:**
* Google Chrome
* Microsoft Edge
* Mozilla Firefox
* Opera

Visit https://webextensions.org/ for further details

**Created by:**
* Priyank Parashar

**Uses:**
* No need to refresh pages to test your CSS/Less/Sass code
* Auto-save your changes to filesystem as you write the code
* Reload CSS resources without refreshing the page
* 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)
* Test styling changes even when you cannot modify the original source code

**Notes:**
* The CSS/Less/Sass code you write gets applied as you write it
* The CSS reloader watches CSS files and live updates them immediately
* With this styling code tester, you can develop and test the code at the same time
* The code is saved in browser/file 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
* Running Magic CSS again, while it is already loaded, will restore it to its original position and size
* 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 `` tag of the active page
* It includes CSS/Less/Sass beautifier
* It includes CSS minifier
* It highlights the DOM elements matching the CSS selectors
* Use it along with your favorite Chrome/Edge/Firefox/Opera Developer tools
* You might find it useful in creating your custom themes for websites based on Stylish / Stylist
* This extension was previously known as "MagiCSS - Live CSS Editor"

**Credits for open source code used by this extension:**
* Amplify JS
* Browserify
* Code Mirror
* [codemirror-colorpicker](https://github.com/easylogic/codemirror-colorpicker)
* [emmetio/codemirror-plugin](https://github.com/emmetio/codemirror-plugin)
* CSS Pretty
* CSSLint
* jQuery
* jQuery UI
* Less
* magicsuggest
* Mozilla Source Map
* SASS / SCSS
* socket.io (WebSocket API library)
* Tooltipster

**Inspirations:**
* "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot

**Author:**
* Priyank Parashar - [GitHub](https://github.com/paras20xx) | [Twitter](https://twitter.com/paras20xx) | [LinkedIn](https://linkedin.com/in/ParasharPriyank/)

**Connect with us:**
* https://webextensions.org/
* [GitHub](https://github.com/webextensions/live-css-editor)
* [Twitter](https://twitter.com/webextensions)