Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)
Clone or download
Permalink
Failed to load latest commit information.
.githooks Updated Node JS, some npm packages and added some git hooks Jun 13, 2018
extension Renamed the live-css package to @webextensions/live-css Jun 2, 2018
extras-for-edge-extension-package/logos Now the extension can be packaged for Edge (Instructions added in Pac… May 6, 2017
live-css Updated Node JS, some npm packages and added some git hooks Jun 13, 2018
scripts Updated Node JS, some npm packages and added some git hooks Jun 13, 2018
testing-zone Added CSS Reload functionality May 14, 2017
.editorconfig Added file watching feature and various other improvements Jun 2, 2018
.eslintignore Minor updates and bumped version to 6.2.21 Nov 8, 2017
.eslintrc Added file watching feature and various other improvements Jun 2, 2018
.gitignore Added file watching feature and various other improvements Jun 2, 2018
.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
Packaging-Edge-Extension.md Now the extension can be packaged for Edge (Instructions added in Pac… May 6, 2017
README.md Added file watching feature and various other improvements Jun 2, 2018
TODO.md Update TODO.md Feb 15, 2018
copy-third-party-front-end-scripts.json Added file watching feature and various other improvements Jun 2, 2018
package-lock.json Updated Node JS, some npm packages and added some git hooks Jun 13, 2018
package.json Updated Node JS, some npm packages and added some git hooks Jun 13, 2018
zip-extension.js Added links for "Rate us" in different browsers and bumped version to… Jul 24, 2017

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-and-less/

Opera Logo   https://addons.opera.com/extensions/details/live-editor-for-css-and-less-magic-css/

Live preview of CSS/Less/Sass code with an in-page editor. 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 your browser's local storage at site level.

Featuring:

  • Live editor for CSS/Less/Sass code - Preview changes as you write code
  • 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
  • CSS reloader
  • Lint CSS code
  • Create GitHub Gist & E-mail

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
  • 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)
  • Reload CSS resources without refreshing the page
  • 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 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 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 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 and services 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: