Live editor for CSS, Less & Sass - Magic CSS Chrome Extension

 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 extensions storage space or the sites local storage.

Featuring:

✓ Live editor for CSS/Less/Sass code - Preview changes as you write code
✓ Autocomplete
✓ Live edit CSS files and auto-save on file system
✓ Open code editor in external window
✓ CSS reloader
✓ Option to reapply styles automatically
✓ Syntax Highlighting
✓ Auto-generate CSS selectors with point-and-click
✓ Emmet support
✓ Color picker
✓ 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
✓ Get SVG icons
✓ Lint CSS code

This extension is available for:

✓ Google Chrome
✓ Microsoft Edge
✓ Mozilla Firefox
✓ Opera

Open source:

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

====+====+====+====+====+====

You might want to use it for:

➤ 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 by writing code directly on your page
➤ Develop and test your code before finalizing your changes
➤ Apply some temporary styles (like hiding some components)
➤ Do CSS changes on any website

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
➤ You can develop the code and see the output at the same time
➤ The code is saved in file/browser as soon as you write it
➤ The code editor is draggable and resizable
➤ Use code editor in external window for developing responsive pages
➤ The code you write is auto-saved for the site
➤ You can use 'TAB' key to indent your code
➤ Running Magic CSS again, while it is already loaded, disables the code
➤ Press 'Esc' or click on close to hide it
➤ The code is added at the bottom of the  tag
➤ It includes CSS/Less/Sass beautifier
➤ It includes CSS minifier
➤ It highlights the DOM elements matching the CSS selectors
➤ Use it along with 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'

Security and privacy:

ⓘ No permissions approval is required for installing the extension
ⓘ For advanced features, like 'Apply styles automatically', permissions are requested on-demand
ⓘ Mixpanel is used to get anonymized stats for improving UX
ⓘ Browser extensions storage, localStorage etc are utilized for the extensions core features.

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

Created by:

➤ Priyank Parashar - https://linkedin.com/in/ParasharPriyank/

Connect with us:

➤ https://webextensions.org/
➤ https://github.com/webextensions/live-css-editor
➤ https://twitter.com/webextensions

How to install Live editor for CSS, Less & Sass - Magic CSS chrome extension in chrome Browser

You can Follow the below Step By Step procedure to install the Live editor for CSS, Less & Sass - Magic CSS Chrome Extension to your Chrome Web browser.

• Step 1: Go to the Chrome webstore https://chrome.google.com/webstore or download the extension Live editor for CSS, Less & Sass - Magic CSS Chrome Extension Download from https://pluginsaddonsextensions.com
• Step 2: Now search for the Live editor for CSS, Less & Sass - Magic CSS in Chrome Webstore Search and click on the search button.
• Step 3: click on the Live editor for CSS, Less & Sass - Magic CSS Chrome Extension Link
• Step 4: in the next page click on the Add to Chrome button to Download and Install the Live editor for CSS, Less & Sass - Magic CSS extension for your Chrome Web browser .