查看: 18|回复: 0

Live editor for CSS, Less & Sass - Magic CSS

[复制链接]

2753

主题

0

回帖

8282

积分

超级版主

积分
8282
发表于 2026-7-9 16:51:53 | 显示全部楼层 |阅读模式

概述
运行此扩展并开始编写立即应用的 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/Less/Sass 代码
➤ 在编写代码时自动保存对文件系统的更改
➤ 重新加载CSS资源而不刷新页面
➤ 通过直接在页面上编写代码来加快开发速度
➤ 在完成更改之前开发并测试您的代码
➤ 应用一些临时样式(例如隐藏一些组件)
➤ 在任何网站上更改 CSS

注意事项:

➤ 您编写的 CSS/Less/Sass 代码会在您编写时应用
➤ CSS 重新加载器监视 CSS 文件并立即实时更新它们
➤ 您可以开发代码并同时查看输出
➤ 代码一编写就保存在文件/浏览器中
➤ 代码编辑器可拖动且可调整大小
➤ 使用外部窗口中的代码编辑器来开发响应式页面
➤ 您编写的代码会自动保存到站点
➤ 您可以使用“TAB”键来缩进代码
➤ 再次运行 Magic CSS,当它已经加载时,会禁用代码
➤ 按“Esc”或单击关闭将其隐藏
➤ 代码添加在标签底部
➤ 包含CSS/Less/Sass美化器
➤ 它包括 CSS 缩小器
➤ 它突出显示与 CSS 选择器匹配的 DOM 元素
➤ 与 Chrome/Edge/Firefox/Opera 开发工具一起使用
➤ 您可能会发现它在为基于 Stylish / Stylist 的网站创建自定义主题时很有用
➤ 此扩展以前称为“MagiCSS - 实时 CSS 编辑器”

安全和隐私:

ⓘ 安装扩展不需要任何权限批准
ⓘ 对于高级功能,例如“自动应用样式”,按需请求权限
ⓘ Mixpanel 用于获取匿名统计数据以改善用户体验
ⓘ 浏览器扩展的存储、localStorage 等用于扩展的核心功能。

请访问 https://webextensions.org/ 了解更多详细信息。

创建者:

➤ Priyank Parashar - https://linkedin.com/in/ParashaPriyank/

与我们联系:

https://webextensions.org/
https://github.com/webextensions/live-css-editor
https://twitter.com/webextensions

.crx
8.22.5
2.15MiB
支持
.zip
8.22.5
2.15MiB
不支持

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|天翼网

相关侵权、举报、投诉及建议等,请发 E-mail:2026@typc.net

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.|晋ICP备2026008270号-1|晋公网安备14010602111293号

在本版发帖QQ客服返回顶部