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://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:
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
<body>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
- 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:
Connect with us: