Live editor for CSS, Less & Sass - Magic CSS
κ°μ
Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...
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 β Autocomplete β Live edit CSS files and auto-save on file system β Open code editor in external window β CSS reloader β Option to reapply styles automatically β Syntax Highlighting β Auto-generate CSS selectors with point-and-click β Emmet support β Color picker β 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 β Get SVG icons β Lint CSS code This extension is available for: β Google Chrome β Microsoft Edge β Mozilla Firefox β Opera Open source: β https://github.com/webextensions/live-css-editor ====+====+====+====+====+==== You might want to use it for: β€ 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 by writing code directly on your page β€ Develop and test your code before finalizing your changes β€ Apply some temporary styles (like hiding some components) β€ Do CSS changes on any website 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 β€ You can develop the code and see the output at the same time β€ The code is saved in file/browser as soon as you write it β€ The code editor is draggable and resizable β€ Use code editor in external window for developing responsive pages β€ The code you write is auto-saved for the site β€ You can use "TAB" key to indent your code β€ Running Magic CSS again, while it is already loaded, disables the code β€ Press "Esc" or click on close to hide it β€ The code is added at the bottom of the <body> tag β€ It includes CSS/Less/Sass beautifier β€ It includes CSS minifier β€ It highlights the DOM elements matching the CSS selectors β€ Use it along with 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" Security and privacy: β No permissions approval is required for installing the extension β For advanced features, like "Apply styles automatically", permissions are requested on-demand β Mixpanel is used to get anonymized stats for improving UX β Browser extension's storage, localStorage etc are utilized for the extension's core features. Visit https://webextensions.org/ for further details. Created by: β€ Priyank Parashar - https://linkedin.com/in/ParasharPriyank/ Connect with us: β€ https://webextensions.org/ β€ https://github.com/webextensions/live-css-editor β€ https://twitter.com/webextensions
5μ λ§μ μ 4.6μ νμ 278κ°
μΈλΆμ 보
- λ²μ 8.22.5
- μ λ°μ΄νΈλ¨2024λ 7μ 24μΌ
- ν¬κΈ°2.15MiB
- μΈμ΄English
- κ°λ°μWebExtensions Private LimitedμΉμ¬μ΄νΈ
1501, Satyam Imperial Heights Plot 59, Sector 17, Roadpali, Kalamboli Raigadh, Maharashtra 410218 INμ΄λ©μΌ
webextensions.org@gmail.com - λΉν맀μν맀μλ‘ μλ³λμ§ μμ κ°λ°μμ λλ€. μ λ½ μ°ν©μ κ±°μ£Όνλ μλΉμμ κ²½μ°, μ΄ κ°λ°μμ 체결ν κ³μ½μ λν΄μλ μλΉμ κΆλ¦¬κ° μ μ©λμ§ μμ μ μμμ μ μν΄μΌ ν©λλ€.
κ°μΈμ 보 보νΈ
κ°λ°μκ° μ¬μ©μ λ°μ΄ν°μ κ΄ν΄ λ€μκ³Ό κ°μ΄ μ μΈνμ΅λλ€
- μΉμΈλ μ¬μ© μ¬λ‘λ₯Ό μ μΈνκ³ μλ νν°μ ν맀νμ§ μμ
- νλͺ©μ ν΅μ¬ κΈ°λ₯κ³Ό κ΄λ ¨ μλ λͺ©μ μΌλ‘ μ¬μ©νκ±°λ μ μ‘νμ§ μμ
- μ μ©λ νλ¨ λλ λμΆ λͺ©μ μΌλ‘ μ¬μ©νκ±°λ μ μ‘νμ§ μμ
μ§μ
μ§λ¬Έ, μ μ λλ λ¬Έμ μ κ΄λ ¨νμ¬ λμμ΄ νμνλ©΄ λ°μ€ν¬ν± λΈλΌμ°μ μμ μ΄ νμ΄μ§λ₯Ό μ¬μΈμ.