Live CSS scratchpad & file editor + Less / Sass and ...

• Do you hate switching between your code editor and browser while writing CSS code?
• Do you hate to refresh webpage when you are making changes in CSS files?
• Do you hate editing CSS in browser DevTools because they reduce the viewport size on your laptop?
• Do you wish for an easier way to identify appropriate CSS selectors?
• Do you wish you could write Less / Sass code while editing and debugging in browser?

If these situations sound familiar to you, read on for a minute to find a fine solution.

In recent years, the browser DevTools have improved a lot in terms of developer experience for CSS development. But, there are still some gaps which need to be filled.

Presenting you with a popular browser extension which has been solving the above mentioned issues along with many other features for thousands of web developers across browsers: Live editor for CSS, Less & Sass - Magic CSS (https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol)

The extension takes a simple, but powerful approach of providing an in-page code editor which is draggable and resizable. Whatever code you write, gets applied immediately and it is saved in your browser for later reuse.

Some of the features worth mentioning:

• Ability to use it as a scratchpad for CSS / Less / Sass code which gets applied as soon as you type it
• Ability to edit files on your filesystem and instant refresh of the relevant CSS files via live-css server, which can be installed and started by executing 2 simple commands in your terminal
• Auto-save the changes as you type
• Highlight and count the elements matching the CSS selector
• Generate the CSS selector of any element via point-and-click tool
• While the core purpose of the tool is to assist in web development, you can use it to modify the styles of any website
• No permissions required by the extension for its core functionality
• Helpful for beginners to try out Less / Sass code without any setup

More details and the source code of the extension are available at: https://github.com/webextensions/live-css-editor

The extension is available for the following browsers:

• Google Chrome
• Mozilla Firefox
• Opera
• Microsoft Edge (old / new)

Google Chrome has better API support for browser extensions and faster publishing process, hence you would find the full featured version on that before the features become available on the other browsers.

Cheers :-)