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, ...

Live editor for CSS, Less & Sass - Magic CSS란 무엇입니까?

Live editor for CSS, Less & Sass - Magic CSS은(는) https://webextensions.org에 의해 개발된 Chrome 확장 프로그램으로, 주요 기능은 "Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ..."입니다.

확장 프로그램 스크린샷

screenshot

Live editor for CSS, Less & Sass - Magic CSS 확장 프로그램 CRX 파일 다운로드

크롬 확장 프로그램을 crx 형식으로 다운로드하여 브라우저에 수동으로 설치하거나 crx 파일을 친구들과 공유하여 쉽게 크롬 확장 프로그램을 설치하세요.

확장 프로그램 사용 설명서

                        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

====+====+====+====+====+====

What some of our users say:

Justin Hale - ★★★★★
"This extension is great! It allows me to pinpoint specific css modifiers to overwrite them properly."

Johnny Petro - ★★★★★
"I would have never expected this: this extension has changed the way I write code. This basically turns Chrome into a live typesetting system. No more developing css in the chrome debugger. No more developing css in an IDE/editor. I feel like this turns Chrome into a word processor."

Tanner Legasse - ★★★★★
"I use this plugin on a daily basis. I don't mean just once or twice in a day, I mean it makes 5 hours of work take 2 for me, and I use it constantly."

Władzix - ★★★★★
"Incredible! Everything I was searching for, runs Live so you don't have to refresh every time you edit something, very nice suggestions while typing and other small features like colors are displayed in squares while typing names. One of the best features is auto enable on websites. I have made dark theme mode for some websites, thanks to this extension! Awesome!!!"

====+====+====+====+====+====

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  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.

Inspirations:
* "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot

Alternative CSS development tools you may like if you are looking for features which are not yet available in Magic CSS:
* Amino: Live CSS Editor
* CSS Peeper
* CSSViewer
* Page Ruler Redux
* PerfectPixel
* Stylebot
* Stylus
* Viewport Resizer
* VisBug
* WhatFont

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

확장 프로그램 기본 정보

이름 Live editor for CSS, Less & Sass - Magic CSS Live editor for CSS, Less & Sass - Magic CSS
ID ifhikkcafabcgolfjegfcgloomalapol
공식 URL https://chromewebstore.google.com/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol
설명 Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...
파일 크기 2.69 MB
설치 횟수 75,746
현재 버전 8.22.1
최근 업데이트 2024-01-14
출시 날짜 2020-04-17
평점 4.65/5 총 255 개의 평점
개발자 https://webextensions.org
이메일 [email protected]
결제 유형 free
확장 프로그램 웹 사이트 https://github.com/webextensions/live-css-editor
도움말 페이지 URL https://github.com/webextensions/live-css-editor/issues
지원되는 언어 en
manifest.json 
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "version": "8.22.1",
    "manifest_version": 3,
    "author": "Priyank Parashar",
    "default_locale": "en",
    "name": "__MSG_Extension_Name__",
    "description": "__MSG_Extension_Description__",
    "homepage_url": "https:\/\/github.com\/webextensions\/live-css-editor",
    "icons": {
        "16": "icons\/icon-16.png",
        "24": "icons\/icon-24.png",
        "32": "icons\/icon-32.png",
        "40": "icons\/icon-40.png",
        "48": "icons\/icon-48.png",
        "128": "icons\/icon-128.png",
        "256": "icons\/icon-256.png"
    },
    "permissions": [
        "activeTab",
        "storage",
        "unlimitedStorage",
        "scripting",
        "offscreen"
    ],
    "optional_permissions": [
        "webNavigation"
    ],
    "optional_host_permissions": [
        "*:\/\/*\/*"
    ],
    "action": {
        "default_icon": {
            "16": "icons\/icon-16.png",
            "24": "icons\/icon-24.png",
            "32": "icons\/icon-32.png",
            "40": "icons\/icon-40.png",
            "48": "icons\/icon-48.png",
            "128": "icons\/icon-128.png",
            "256": "icons\/icon-256.png"
        },
        "default_title": "Launch Magic CSS editor for this page"
    },
    "background": {
        "service_worker": "dist\/background-magicss\/background-magicss.bundle.js"
    },
    "commands": {
        "_execute_action": {
            "suggested_key": {
                "default": "Alt+Shift+C"
            }
        }
    },
    "options_ui": {
        "open_in_tab": true,
        "page": "options.html"
    },
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'"
    },
    "offline_enabled": true,
    "minimum_chrome_version": "102"
}

관련 확장 프로그램

User JavaScript and CSS
User JavaScript and CSS
Stylebot
Stylebot
Code Plunker (Live HTML CSS Editor)
Code Plunker (Live HTML CSS Editor)
Code Cola
Code Cola
Amino: Live CSS Editor
Amino: Live CSS Editor
CSS3 Generator
CSS3 Generator
Live CSS Editor
Live CSS Editor
Save CSS
Save CSS
CSSViewer
CSSViewer
CSS Shapes Editor
CSS Shapes Editor
User CSS
User CSS
Wordpress Style Editor
Wordpress Style Editor