Live editor for CSS, Less & Sass – Magic CSS

提供方:https://webextensions.org
2019年11月29日
36156 个用户
版本:7.0.7
更新时间:2019年3月8日
大小:510KiB
               

简介

运行此扩展并开始编写您的CSS / Less / Sass代码,该代码将立即应用。您编写的代码将在站点级别保存在浏览器的本地存储中。

特色:
*用于CSS / Less / Sass代码的实时编辑器-在编写代码时预览更改
*自动重新应用样式的选项
*语法突出显示
*通过点击自动生成CSS选择器
*自动完成CSS选择器,属性和值
* Emmet支持有助于将缩写快速扩展为CSS代码(https://docs.emmet.io/css-abbreviations/)
*颜色选择器(支持HEX,RGB,RGBA,HSL和HSLA)
*将代码从Less / Sass转换为CSS
*美化/格式化代码
*缩小代码
*突出显示与CSS选择器匹配的DOM元素
* CSS重新加载器
*也可以选择在iframe中加载此扩展程序
* Lint CSS代码

开源:
* https://github.com/webextensions/live-css-editor

此扩展名可用于:
* 谷歌浏览器
* Microsoft Edge
* 火狐浏览器
*歌剧

访问https://webextensions.org/了解更多信息

由…制作:
*普里扬克·帕萨尔(Priyank Parashar)

用途:
*无需刷新页面即可测试CSS / Less / Sass代码
*通过直接在页面上进行来加快样式代码的开发和测试
*在完成对项目文件的更改之前,先开发和测试代码
*应用一些临时样式(例如隐藏一些组件)
*重新加载CSS资源而不刷新页面
*即使无法修改原始源代码,测试样式也会更改

笔记:
*您编写的CSS / Less / Sass代码在编写时会被应用
* Sass解析器从https://cdnjs.cloudflare.com/ajax/libs/sass.js/远程加载…
*使用此样式代码测试器,您可以同时开发和测试代码
*编写代码后,代码会立即保存在浏览器中
*代码编辑器可调整大小并可拖动
*您编写的代码会在网站级别自动保存,并且可以再次用于相同或不同的页面
*您可以使用 TAB”键缩进代码
*在已加载的情况下再次运行Magic CSS,会将其恢复到原始位置和大小
*按 Esc”或单击关闭以将其隐藏并再次运行以继续进行更改
*您编写的代码被添加到活动页面的标记的底部
*包括CSS / Less / Sass美化器
*包括CSS缩小器
*突出显示与CSS选择器匹配的DOM元素
*与您最喜欢的Chrome / Edge / Firefox / Opera Developer工具一起使用
*您可能会发现它对于基于时尚/造型师”为网站创建自定义主题很有用
*此扩展先前称为 MagiCSS-Live CSS Editor”

此扩展使用的开源代码的代码:
*放大JS
* Browserify
*代码镜像
* easylogic的Codemirror-colorpicker @ GitHub
* emmetio提供的Emmet codemirror-plugin @ GitHub
* CSS漂亮
* CSSLint
* jQuery的
* jQuery UI
* jQuery UI触摸打孔
* 减
* Mozilla源地图
* SASS / SCSS
*工具提示

启示:
*通过点击自动生成CSS选择器”功能部分受Chrome扩展SelectorGadget和Stylebot的启发

与我们联系:
* https://webextensions.org/
* https://github.com/webextensions/live-css-editor
* https://twitter.com/webextensions
* Priyank Parashar-https://linkedin.com/in/ParasharPriyank/