Live editor for CSS, Less & Sass - Magic CSS

Description from extension meta Live preview of CSS/Less/Sass code with an in-page editor. Autocomplete, Less/Sass to CSS, beautify, minify, 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 your browser's local storage at site level. Featuring: * Live editor for CSS/Less/Sass code - Preview changes as you write code * 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 * CSS reloader * 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 * 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 <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 * Mozilla Source Map * SASS / SCSS * 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 (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) Sharko Ots: 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. (2019-06-01) Farzin Hatami: Sometimes is useful, but not always... (2019-05-15) Artich: Классное расширение, рекомендую. (2019-05-05) Sabin Petre: Este perfect,ceea ce imi trebuia demult.Imi place ca se mareste,micsoreaza si se poate muta acolo unde doresc. (2019-04-22) Siniša Petrović: Nice extension but, you can't use it in mobile view, because it's loaded inside the window. That's a big issue. (2019-04-12) Nancy M Schorr: Awesome! Fixed the Google Tasks problem with the canvas view being obsolete. Thank you! Here's what I did: 1) install this extension: 'Live editor for CSS, Less & Sass - Magic CSS' 2) put this css into the extension's css editor: .gb_gd,.gb_Md,.gb_od,.gb_Zb { display: none; } .brC-brG { width: 100vw!important; } .G4zhSc,.CTxcDf { width: 100%; } Set it to apply automatically (little icon at top of extension's window). To get it to work I need to click on the Extension icon in the address bar to activate it (not sure why), then press F12 to bring up devtools (not sure why either). That's it! (2019-04-11) Krystian Jakubowski: Best plugin for editing CSS styles, also handful LESS and SASS editor. Thank you for great plugin :) (2019-02-25) Ashish Shrestha: Very useful!!! (2019-02-07) Mike: It keep's the style when I accidentally refresh the page, thank you! The only thing is it would be awesome if you could move the window outside of the chrome main page window... (2019-02-05) Sven du Carrois: Very helpful. Same on firefox (2019-01-16) Pablo Beltrán: Very useful! (2018-12-04) Kaile Morgan: Отличное расширение. Все что нужно имеется. (2018-10-25) Dilan Huffman: i love it thx (2018-09-21) Ravi Mattar: what a disgusting excuse for an extension