Live editor for CSS, Less & Sass - Magic CSS
Image du logo de l'article pour Live editor for CSS, Less & Sass - Magic CSS

Live editor for CSS, Less & Sass - Magic CSS

webextensions.org
Sélection
4,7(

258 avis

)
Capture d'écran 1 de l'élément multimédia

Présentation

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

4,7 sur 5258 avis

Google ne valide pas les avis. En savoir plus sur les résultats et les avis

Photo de profil de l'avis

Sebastien Degliame16 mai 2024

Très puissant et facile à utiliser ; un must pour le dev front et l'amélioration progressive pour bénéficier sans autre outil des bénéfices de SASS et/ou LESS. L'extension est très stable et beaucoup moins intrusive que ses concurrentes. Un must-have.

Photo de profil de l'avis

yassine25 févr. 2023

les fonctionnalités sont dures à trouver mais c'est pile ce qu'il me fallait - tu peux laisser l'extension générer le code lié à un élément de la page en le sélectionnant (l'icône à gauche de la croix en haut à droite) - et avec l'épingle (à gauche des 3 points) tu peux automatiquement appliquer le style au chargement de la page (c'est lié au domaine donc tout le site pas à une seule page) sans devoir lancer l'extension

Photo de profil de l'utilisateur qui a répondu

Web ExtensionsDéveloppeur28 févr. 2023

Thank you for your feedback 🙏 ... We will attempt to make the features more discoverable and/or provide appropriate guides.

Photo de profil de l'avis

Logan Bunelle1 juin 2019

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.

3 utilisateur(s) sur 3 ont trouvé cet avis utile
Photo de profil de l'utilisateur qui a répondu

Web ExtensionsDéveloppeur19 juil. 2019

Cheers :-)

Détails

  • Version
    8.22.3
  • Dernière mise à jour
    7 mars 2024
  • Taille
    2.15MiB
  • Langues
    English
  • Développeur
    WebExtensions Private Limited
    1501, Satyam Imperial Heights Plot 59, Sector 17, Roadpali, Kalamboli Raigadh, Maharashtra 410218 IN
    Site Web
    E-mail
    webextensions.org@gmail.com
  • Professionnel
    Ce développeur s'est identifié comme professionnel selon la définition de l'Union européenne.

Confidentialité

Le développeur a indiqué qu'il ne collecterait et n'utiliserait pas vos données.

Ce développeur déclare que vos données :

  • Ne seront pas vendues à des tiers en dehors des cas d'utilisation approuvés.
  • Ne seront ni utilisées ni transférées à des fins sans rapport avec la fonctionnalité de base de l'article.
  • Ne seront ni utilisées ni transférées pour déterminer votre solvabilité ou en vue de vous proposer un prêt.

Assistance

Articles similaires

CSS Shapes Editor

3,8(101)

Interactive editor for CSS Shapes.

User CSS

3,6(256)

A quick and easy way to add custom CSS to the current web site.

Wordpress Style Editor

3,1(47)

Save CSS changes made in developer tools, directly to the Wordpress stylesheet.

Stylebot

4,3(1,6 k)

Changer l'apparence du Web instantanément

User JavaScript and CSS

4,8(482)

User JavaScript and CSS on any website

Code Plunker (Live HTML CSS Editor)

4,5(8)

Test your HTML,CSS,JS and Get the program output instantly!

Code Cola

4,6(188)

Code Cola is a chrome extension for editing online pages' css style visually.

Amino: Live CSS Editor

4,3(443)

Éditeur CSS en direct. Écrivez du CSS personnalisé pour n'importe quel site Web et visualisez vos modifications en temps réel.

CSS3 Generator

4,7(60)

A handy generator for all of your CSS3 needs from within the browser

Live CSS Editor

3,8(183)

Live Write CSS onto any page

Save CSS

3,9(29)

Save your CSS and JS modifications in Devtools automatically to local disk.

CSSViewer

4,4(366)

A simple CSS property viewer.

CSS Shapes Editor

3,8(101)

Interactive editor for CSS Shapes.

User CSS

3,6(256)

A quick and easy way to add custom CSS to the current web site.

Wordpress Style Editor

3,1(47)

Save CSS changes made in developer tools, directly to the Wordpress stylesheet.

Stylebot

4,3(1,6 k)

Changer l'apparence du Web instantanément

User JavaScript and CSS

4,8(482)

User JavaScript and CSS on any website

Code Plunker (Live HTML CSS Editor)

4,5(8)

Test your HTML,CSS,JS and Get the program output instantly!

Code Cola

4,6(188)

Code Cola is a chrome extension for editing online pages' css style visually.

Amino: Live CSS Editor

4,3(443)

Éditeur CSS en direct. Écrivez du CSS personnalisé pour n'importe quel site Web et visualisez vos modifications en temps réel.

Applications Google