Live editor for CSS, Less & Sass - Magic CSS

• 简介：开发者工具
• 攻略：下载的 crx 插件如何安装到浏览器上？

CSS/Less/Sass 代码更改的实时预览。自动保存文件、自动完成、Less/Sass 到 CSS、美化、CSS 重新加载器、lint、...
运行此扩展并开始编写可立即应用的 CSS/Less/Sass 代码。您编写的代码将保存在浏览器扩展的存储空间或站点的本地存储中。
特色：
✓ CSS/Less/Sass 代码的实时编辑器 - 在编写代码时预览更改
✓ 自动完成
✓ 实时编辑 CSS 文件并在文件系统上自动保存
✓ 在外部窗口中打开代码编辑器
✓ CSS 重载器
✓ 自动重新应用样式的选项
✓ 语法高亮
✓ 通过点击自动生成 CSS 选择器
✓ Emmet 支持
✓ 颜色选择器
✓ 将代码从 Less/Sass 转换为 CSS
✓ 美化/格式化代码
✓ 缩小代码
✓ 突出显示与 CSS 选择器匹配的 DOM 元素
✓ 也可选择在 iframe 中加载此扩展
✓ 获取 SVG 图标
✓ Lint CSS 代码
此扩展程序可用于：
✓ 谷歌浏览器
✓ 微软边缘
✓ 火狐浏览器
✓ 歌剧
开源：
✓ https://github.com/webextensions/live-css-editor
====+====+====+====+====+====
我们的一些用户说：
贾斯汀·黑尔 - ★★★★★
“这个扩展很棒！它允许我查明特定的 css 修饰符以正确覆盖它们。”
约翰尼佩特罗 - ★★★★★
“我没想到：这个扩展改变了我编写代码的方式。这基本上把 Chrome 变成了一个实时排版系统。不再在 chrome 调试器中开发 css。不再在 IDE/编辑器中开发 css。我觉得这将 Chrome 变成了文字处理器。”
Tanner Legasse - ★★★★★
“我每天都在使用这个插件。我不是说一天只用一两次，我的意思是它让我 5 小时的工作需要 2 小时，而且我一直在使用它。”
瓦兹克斯 - ★★★★★
“难以置信！我搜索的所有内容都运行 Live，因此您不必在每次编辑内容时刷新，在输入时提供非常好的建议，在输入名称时其他小功能（如颜色）会显示在方块中。最好的功能之一是在网站上自动启用。我为一些网站制作了深色主题模式，感谢这个扩展！太棒了！！！”
====+====+====+====+====+====
您可能希望将其用于：
➤ 无需刷新页面即可测试您的 CSS/Less/Sass 代码
➤ 在编写代码时自动保存对文件系统的更改
➤ 无需刷新页面即可重新加载 CSS 资源
➤ 通过直接在页面上编写代码来加速开发
➤ 在完成更改之前开发和测试您的代码
➤ 应用一些临时样式（比如隐藏一些组件）
➤ 在任何网站上更改 CSS
笔记：
➤ 您编写的 CSS/Less/Sass 代码在您编写时得到应用
➤ CSS 重新加载器监视 CSS 文件并立即对其进行实时更新
➤ Sass 解析器从 https://cdnjs.cloudflare.com/ajax/libs/sass.js/ 远程加载...
➤ 可以在开发代码的同时查看输出
➤ 代码一写好就保存在文件/浏览器中
➤ 代码编辑器可拖动和调整大小
➤ 在外部窗口中使用代码编辑器开发响应式页面
➤ 您编写的代码是为站点自动保存的
➤ 您可以使用“TAB”键来缩进您的代码
➤ 再次运行 Magic CSS，当它已经加载时，禁用代码
➤ 按“Esc”或单击关闭以隐藏它
➤ 代码添加在 标签底部
➤ 它包括 CSS/Less/Sass 美化器
➤ 它包括 CSS minifier
➤ 突出显示与 CSS 选择器匹配的 DOM 元素
➤ 与 Chrome/Edge/Firefox/Opera 开发者工具一起使用
➤ 您可能会发现它在为基于 Stylish / Stylist 的网站创建自定义主题时很有用
➤ 这个扩展以前被称为“MagiCSS - Live CSS Editor”
安全和隐私：
ⓘ 安装扩展不需要权限批准
ⓘ 对于高级功能，如“自动应用样式”，按需请求权限
ⓘ Google Analytics 用于获取匿名统计数据以改善用户体验
ⓘ 浏览器扩展的存储、localStorage 等用于扩展的核心功能。
此扩展程序使用的开源代码的积分：
* 放大JS
* 通天塔
* 浏览器化
* 代码镜像
* codemirror-colorpicker by easylogic @ GitHub
* Emmet codemirror-plugin by emmetio @ GitHub
* CSS 漂亮
* CSSLint
* ESLint
* jQuery
* jQuery 界面
* jQuery UI 触摸打孔
* 较少的
*魔法建议
* 材质-用户界面
* Mozilla 源地图
* Node.js
* 反应 JS
* 反应 Redux
* SASS / SCSS
* socket.io（WebSocket API 库）
* 工具提示
* 网络包
如果您正在寻找 Magic CSS 中尚不可用的功能，您可能会喜欢的替代 CSS 开发工具：
* Amino：实时 CSS 编辑器
* CSS 窥视器
* CSS查看器
* 页面标尺 Redux
*完美像素
* 风格机器人
* 手写笔
*视口调整器
* 可见错误
* 什么字体
灵感：
* “通过点击自动生成 CSS 选择器”功能部分受到 Chrome 扩展 SelectorGadget 和 Stylebot 的启发
访问 https://webextensions.org/ 了解更多详情。
由...制作：
➤ Priyank Parashar - https://linkedin.com/in/ParasharPriyank/
联系我们：
➤ https://webextensions.org/
➤ https://github.com/webextensions/live-css-editor
➤ https://twitter.com/webextensions