Live editor for CSS, Less & Sass - Magic CSS

Description from extension meta

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

Image from store Live editor for CSS, Less & Sass - Magic CSS

Description from store 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: * https://github.com/webextensions/live-css-editor 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: * Amplify JS * Browserify * Code Mirror * codemirror-colorpicker by easylogic @ GitHub * Emmet codemirror-plugin by emmetio @ GitHub * CSS Pretty * CSSLint * jQuery * jQuery UI * jQuery UI Touch Punch * Less * magicsuggest * Mozilla Source Map * SASS / SCSS * socket.io (WebSocket API library) * Tooltipster Inspirations: * "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot Connect to us at: * https://webextensions.org/ * https://github.com/webextensions/live-css-editor * https://twitter.com/webextensions * Priyank Parashar - https://linkedin.com/in/ParasharPriyank/

Latest reviews

(2020-07-15) HieiLawliet: finally, an awesome live css extension that auto loads my styles
(2020-07-08) Ahmed Hafez: ♥
(2020-06-24) Josef Chadim: Very useful to avoid wiping your ideas on refresh when debugging.
(2020-04-15) Daniel Coto: Absolutely incredible. Automatic page load, finds classes, click on element to add selector to editor. Just crazy. Thank you very much.
(2020-04-15) Lucas Liu: Anyone is having trouble connect to the live-css server as I do from localhost on Mac? I'm launching the server as instructed however it is only running with http but the extension is looking for https. Other than this, everything is perfect.
(2020-04-10) Den Hector: Лучшее расширение из тех, что пробовал на сегодняшний день. Да, не спорю, есть что хотелось бы добавить, но у каждого свои желания и всем не угодишь)))
(2020-03-17) Jose Antonio Carmona Morón: Desde me lo descubrí no puedo vivir sin él, una auténtica maravilla
(2020-01-10) Ben Cheshire: Essential for front-end devs. After using this you may wonder how you ever managed without it!
(2019-12-31) Happy Fone: loved the first ONE MINUTE of this extension great app!
(2019-12-15) Jenny Nguyen: I love it, it saved my life
(2019-12-08) Мастер Дарий: Действительно лучшее, но жаль что нет синхронизации или хотябы экспорта! ----------------------------------------------------------------------------------------------------------- Really the best, but it is a pity that there is no synchronization or at least export!
(2019-12-04) Simon Fevyer: Very useful.
(2019-11-21) Chorrochó News: Perfeito, a melhor ferramenta do Gênero!!!! Parabéns para o autor!
(2019-10-17) Squiggley Woo: You are a genius! This is saving me sooooooo much time its untrue. Thanks muchly
(2019-10-15) Xiguo Zhou: BIG BUG ！！！！ when set div { background-color:red } the background color of the edit view been changed too. So every elements in the edit view should set !important to all styles;
(2019-09-30) Chris Low: Absolutely love this extension, I use it every day. Nice work guys!
(2019-09-30) Nam Đặng: A great plugin, I love you 3000!
(2019-08-19) Simon Edwards: Fantastic. I've tried all of the extensions on the store which do this, but this is by far the best. I hope you keep up the development for this and not fade away like a lot of others devs! =]
(2019-08-16) John Camacho: Excellent. Cannot develop without it.
(2019-07-24) Władzix 2: Incredible! Everything I was searching for, runs Live so you dont have to run every time you edit something,very nice suggestions while typing and other small features like colors are displayed in squares while typing names. The one of the best features is auto enable on websites. I have made dark theme mode for some websites, thanks to this extension! Awesome!!!
(2019-07-19) Yannick Burky: I can't live without it anymore.
(2019-07-16) shod 197: great app but doesn't work with firebase.google.com
(2019-07-04) void painter: much lighter than stylish, and the same useful
(2019-06-14) Eric Casequin: Absolutely amazing! Love this tool so much! Great job!
(2019-06-01) Logan Bunelle: On ne ne peut pas éditer les fichiers html locaux, mais appart ça l'extension est extrêmement utile et très bien réalisée. Je l'utilise depuis au moins un an je crois, et je n'ai jamais eu aucun problème. Elle sauvegarde très bien le css quand on quitte la page et l'interface est très intuitive.

Latest issues

(2020-02-07, v:7.0.10) Vizlox: Color Editing Tool Not Working
When I try to open the color tool menu by clicking on the square to the left of a color hex, it brings up the menu but without any of the buttons and sliders, only a blank white rectangle. At the top is the color gradient graphic which I am unable to interact with. I tried uninstalling and reinstalling the extension from chrome, I tried rebooting chrome, and I tried restarting my computer but none of these fixed the issue.
(2020-01-13, v:7.0.7) Ben Cheshire: Custom CSS for iframes overwrites the parent page's CSS too
When working in an iframe, if the parent page is refreshed, the custom CSS for the parent page will sometimes (but not always) be overwritten by the iframe's CSS. It's just a minor annoyance for me as I don't need the parent page to have custom CSS, so I just remove the entire block every time it happens. There was one occasion where the parent frame's CSS overwrote the iframe's CSS, luckily I already had a backup of the stylesheet.
(2019-12-31, v:7.0.7) Tojanna Creative: i cannot connect to the live css server
i cannot connect to the live css server, how to resolove ?
(2019-12-08, v:7.0.7) Мастер Дарий: sync or export
Please add sync or export.
(2019-08-19, v:7.0.7) Simon Edwards: URL changed, cannot access my code to copy/restore it to the new URL
Hello, Love the extension, I've been using it for a very long time. I'm running into an issue where the URL of a website I've heavily customized has changed its URL e.g. example1.domain.com to example2.domain.com which means all of my CSS got reset. Is there any way for me to access my old CSS which is still stored on example1? I cannot get to the old URL as it immediately redirects to the new URL so I'm a bit stuck, and I've got about 8 months worth of CSS stored in there. Kind regards, Simon
(2018-12-24, v:7.0.7) Thanks for the awesome extension
Please add reset option to extension main menu ,because I typed this `body{display:none}`
(2018-08-04, v:7.0.0) How can I edit the css for an iframe?
I have ticked the 'Load for frame/iframe' option, but I still get only one instance of the editor for a page which contains iframes, and I can't select elements within the iframe.
(2018-07-10, v:7.0.0) Refano Pradana: can it block magnifier glass ui?
Can it block magnifier glass ui in ebay, amazon, aliexpress. Whenever I view the product viewer, the annoying jquery block the image.
(2018-06-12, v:7.0.0) Load current css file to edit
Perhaps I'm overlooking this feature, but is it possible to load the current .css file on a webpage to quickly make edits?
(2018-03-24, v:6.2.25) webdeve deveweb: Mobile responsive problem
Very cool plugin but when you use it for responsiveness of you can't move the location of the css editor
(2018-01-24, v:6.2.23) Aviad Priel: import sass files
i give 10 stars if is a way to import sass from file to import the mixns and the variables
(2018-01-05, v:6.2.22) Ammi Said: Thank
Thank very lot !!!
(2018-01-03, v:6.2.22) Andrew Nyland: Please fix
This is useless if it can't run in extensions.
(2017-11-18, v:6.2.22) Omid Rahmani: magic css android
magic css android ???

Statistics

Installs

38,593

Links

Extension in store

Web page

Developer e-mail