Live editor for CSS, Less & Sass - Magic CSS

Live editor for CSS, Less & Sass - Magic CSS

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

What is Live editor for CSS, Less & Sass - Magic CSS?
Live editor for CSS, Less & Sass - Magic CSS is a resourceful Firefox add-on that allows developers to instantly see the results of their CSS, Less or Sass code. Changes are auto-saved and applicable styles loaded automatically. With additional features like syntax highlighting, autocompletion, and linters, it also allows conversion of Less/Sass to CSS code, code beautification and minification, and CSS reloader functionality, making styling code development and testing more efficient.
Merlin
Stats
Users: 1,762 ▲ 27
Rating: 4.54 (41)
Version: 8.10.2 (Last updated: 2021-04-21)
Creation date: 2017-04-20
Weekly download count: 56
Firefox on Android: No
Risk impact: Moderate risk impact
Risk likelihood: Low risk likelihood
Manifest version: 2
Permissions:
  • activeTab
  • storage
  • unlimitedStorage
  • webNavigation
  • <all_urls>
Size: 801.93K
Stats date:

Other platforms

Live editor for CSS, Less & Sass - Magic CSS
Not available on Edge
Want to check extension ranking and stats more quickly for other Firefox add-ons? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Firefox Browser Add-ons.
Chrome-Stats extension
Merlin
Summary

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
See more
User reviews
User reviews summary
These summaries are automatically generated weekly using AI based on recent user reviews. Firefox Browser Add-ons does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.
Pros
  • Useful for live editing CSS on web pages
  • Support for CSS making web development tasks simpler
  • The potential inclusion of Sass support as in Chrome version
  • Functionality to resize text areas and print to PDF on Android
  • Helps in identifying HTML elements like divs and spans and styling them
Cons
  • No permanent change saving, need to reactivate on every new session
  • No pin button for easier access
  • Does not work well with some text colors
  • Limited functionality compared to similar tools like EditCSS
  • No option for opening/saving local style sheets
Most mentioned
  • Sass support (positive anticipation but also a shortcoming until implemented)
  • User interface could be improved (e.g., requests for sidebar, dark/light theme switcher, material design)
  • Extension convenience (both positive and negative points about popup vs. sidebar)
  • Functionality for live editing and seeing immediate results
  • Need to improve on saving changes and extension accessibility
Recent reviews
Very, very cool and useful extension. I'll get the remaining star when we get SASS support like on the Chrome version.
by ÐarkbloøM, 2024-02-13
View all user reviews
Safety
Risk impact

Live editor for CSS, Less & Sass - Magic CSS may not be safe to use and it requires some risky permissions. Exercise caution when installing this add-on. Review carefully before installing.

Risk likelihood

Live editor for CSS, Less & Sass - Magic CSS has earned a fairly good reputation and likely can be trusted.

Upgrade to see risk analysis details
Screenshots