Skip to content
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)
JavaScript CSS HTML Shell
Branch: master
Clone or download

Latest commit

Latest commit c7fa540 May 11, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.githooks
extension Bumped version to 8.5.0 May 11, 2020
extras-for-edge-extension-package/logos Now the extension can be packaged for Edge (Instructions added in Pac… May 6, 2017
live-css Bumped version to 8.5.0 May 11, 2020
scripts Updated Node JS, some npm packages and added some git hooks Jun 13, 2018
testing-zone Added file editing functionality and some other updates Feb 23, 2020
.editorconfig Updated .nvmrc and .editorconfig Dec 25, 2018
.eslintignore Minor updates and bumped version to 6.2.21 Nov 8, 2017
.eslintrc Preparing to bring async storage (via chrome.storage.sync / chrome.st… Jul 27, 2019
.gitignore
.nvmrc Added file watching feature and various other improvements Jun 2, 2018
LICENSE Initial commit Apr 6, 2017
PRIVACY-POLICY.md Added PRIVACY-POLICY.md Dec 3, 2017
README.md Updated link for Firefox extension Mar 7, 2020
TODO.md Updated TODO.md about optimizing data structure to mitigate chrome.st… Apr 18, 2020
copy-files-from-to.cjson Reduced the amount of minified code being copied May 11, 2020
notes-for-developers.md Updated notes-for-developers.md Mar 9, 2020
notes.md Added a known issue Oct 20, 2018
package-lock.json Bumped version to 8.5.0 May 11, 2020
package.json Bumped version to 8.5.0 May 11, 2020
zip-extension.js Now including Sass within Firefox extension Apr 6, 2020

README.md

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.

Google Chrome Logo   https://chrome.google.com/webstore/detail/ifhikkcafabcgolfjegfcgloomalapol

Microsoft Edge Logo   https://www.microsoft.com/store/p/live-editor-for-css-and-less-magic-css/9nzmvhmw5md1

Mozilla Firefox Logo   https://addons.mozilla.org/firefox/addon/live-editor-for-css-less-sass/

Opera Logo   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
  • The Sass parser is loaded remotely from https://cdnjs.cloudflare.com/ajax/libs/sass.js/...
  • With this styling code tester, you can develop and test the code at the same time
  • The code is saved in file/browser 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:

Inspirations:

  • "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot

Author:

Connect to us:

You can’t perform that action at this time.