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, ...

Live editor for CSS, Less & Sass - Magic CSS
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.
Stats
Rating: 4.55 (42)
Version: 8.10.2 (Last updated: 2021-04-21)
Creation date: 2017-04-20
Weekly download count: 36
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
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
by ROVbeard, 2024-05-25

by ROVbeard, 2024-05-25

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