基本信息

更新日期:
包名:
ahibbdhoijcafelmfepfpcmmdifchpdg
版本:
8.9.0
类型:
Edge
平台:
Chrome
评分:
4
发布日期:
2021-04-16
价格:
免费
开发者:
webextensions.org

Live editor for CSS, Less & Sass插件截图

【图】Live editor for CSS, Less & Sass – Magic CSS(截图1)

Live editor for CSS, Less & Sass插件简介

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
* Live edit CSS files and auto-save on file system
* CSS reloader
* Option to reapply styles automatically
* Syntax Highlighting
* Auto-generate CSS selectors with point-and-click
* Autocomplete for CSS selectors, properties and values
* Emmet support helps in quickly expanding abbreviations to CSS code (https://docs.emmet.io/css-abbreviations/)
* Color picker (supports HEX, RGB, RGBA, HSL and HSLA)
* 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
* Lint CSS code

Open source:
* https://github.com/webextensions/live-css-editor

This extension is available for:
* Google Chrome
* Microsoft Edge
* Mozilla Firefox
* Opera

Visit https://webextensions.org/ for further details

Created by:
* Priyank Parashar

Uses:
* 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 and testing of your styling code by doing it directly on your page
* Develop and test your code before finalizing your changes into the project files
* Apply some temporary styles (like hiding some components)
* Test styling changes even when you cannot modify the original source code

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
* The Sass parser is loaded remotely from https://cdnjs.cloudflare.com/ajax/libs/sass.js/…
* With this styling code tester, you can develop and test the code at the same time
* The code is saved in file/browser as soon as you write it
* The code editor is resizable and draggable
* The code you write is auto-saved at site level and can be used again for same or different pages
* You can use “TAB” key to indent your code
* Running Magic CSS again, while it is already loaded, will restore it to its original position and size
* Press “Esc” or click on close to hide it and run it again to continue making changes
* The code you write is added at the bottom of the tag of the active page
* It includes CSS/Less/Sass beautifier
* It includes CSS minifier
* It highlights the DOM elements matching the CSS selectors
* Use it along with your favorite 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”

Credits for open source code used by this extension:
* Amplify JS
* Browserify
* Code Mirror
* codemirror-colorpicker by easylogic @ GitHub
* Emmet codemirror-plugin by emmetio @ GitHub
* CSS Pretty
* CSSLint
* jQuery
* jQuery UI
* jQuery UI Touch Punch
* Less
* magicsuggest
* Mozilla Source Map
* SASS / SCSS
* socket.io (WebSocket API library)
* Tooltipster

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

Connect to us at:
* https://webextensions.org/
* https://github.com/webextensions/live-css-editor
* https://twitter.com/webextensions
* Priyank Parashar – https://linkedin.com/in/ParasharPriyank/

类似Live editor for CSS, Less & Sass插件

此扩展启用了Azure Active Directory的租户限制功能。 Kiatnakin Bank Employee只能访问Kiatnakin Bank租户UAT环境。
此扩展启用了Azure Active Directory的租户限制功能。 Kiatnakin Bank Employee只能访问Kiatnakin Bank租户UAT环境。
The big circle color and your own circle need to be the same color, dont hit the big circle with a different color.
The big circle color and your own circle need to be the same color, dont hit the big circle with a different color. Get ready for fun by changing colors in a fun circle game! Make ..
Extends your experience with Ziflow ..
Extends your experience with Ziflow allowing you to review rich media (HTML5) banners and live websites Ziflow's online proofing software has all the features you need to manage yo..
作为fujitsu systemwalker desktop keeper功能的一部分,进行网页的操作控制和记录。 本扩展功能可在安装了fujitsu systemwalker..
作为fujitsu systemwalker desktop keeper功能的一部分,进行网页的操作控制和记录。 本扩展功能可在安装了fujitsu systemwalker desktop keeper v15.4.0或更高版本的环境中运行。
PDF在线创作者直接在您的浏览器中提供全套功能。 无论您是为学校项目制作文档的学生,还是作为工作的一部分被指派处理某些文档的专业人员,都将需要某些能够生成安全可靠的文档格式的应..
PDF在线创作者直接在您的浏览器中提供全套功能。 无论您是为学校项目制作文档的学生,还是作为工作的一部分被指派处理某些文档的专业人员,都将需要某些能够生成安全可靠的文档格式的应用程序的帮助。可以根据需要轻松转换为其他格式。 为此目的最受欢迎的在线应用程序之一是PDF Creator。可通过浏览器轻松在线获取。它是一个非常简单的文档创建者,具有多种功能,可用于..
Modify HTTP request and response hea..
Modify HTTP request and response headers The most popular browser extension to modify request and response headers What can ModHeader do? - Add / modify / remove request headers an..
Build your family tree. Export HQ images of your family tree. Add reminders. Get daily reminder notifications.
Build your family tree. Export HQ images of your family tree. Add reminders. Get daily reminder notifications. Family Tree is a great way to build your family tree. You can create ..
Transform New Tab to Beyond Tab , wi..
Transform New Tab to Beyond Tab , with Beyond Tab you can customize your New Tab in every aspect. Transform New Tab To Your Personal World With Beyond Tab. • 100% Safe And Secure (..
The official Knowies plugin allows y..
The official Knowies plugin allows you to easily save and share articles, videos and other online content that are interesting for you in your Knowies profile. Choose directly in w..
我总是被推特上的趋势分散了注意力,发现几乎没有什么价值。 这个扩展隐藏了Twitter上的热门项目和关注谁的建议。 GitHub: https://github.com/Jke..
我总是被推特上的趋势分散了注意力,发现几乎没有什么价值。 这个扩展隐藏了Twitter上的热门项目和关注谁的建议。 GitHub: https://github.com/JkeFos/ 隐藏-twitter-趋势 Freepik在www.flaticon.com制作的图标
Ziyaret ettiğiniz websitelerine ait ..
Ziyaret ettiğiniz websitelerine ait whois bilgilerine tek tıkla ulaşın. Güncellenmiş versiyonda, sayfa içerisinde geçen alan adlarını tespit ederek hemen ardına whois linki ekliyor..
Công cụ đặt hàng tiện ích, nhanh chó..
Công cụ đặt hàng tiện ích, nhanh chóng, hỗ trợ đặt hàng trên các trang web Taobao, 1688, Tmall. Công cụ đặt hàng tiện ích, nhanh chóng, hỗ trợ đặt hàng trên các trang web Taobao, 1..
A maintained version of Snowlord7's ..
A maintained version of Snowlord7's quizlet hacks tweaks & scripts. This version just has the relevant quizlet scripts with no bloat. This is based on my fork of Snowlord7's gi..
A warning borders for salesforce non..
A warning borders for salesforce non-sanbox org. Borders are also in developer console and in anonymous window. This app is for distinguishing the production environment and sandbo..
任意门-PC提交bug插件 1、截图上传 2、traceId拦截 3、bug描述 alibaba内部使用
任意门-PC提交bug插件 1、截图上传 2、traceId拦截 3、bug描述 alibaba内部使用
Chrome Extension to provide CodeProj..
Chrome Extension to provide CodeProject template items. This extension is for members of The Code Project. The extension provides the ability for creating template items that can b..
Avoid the time suck converting C# to..
Avoid the time suck converting C# to F# Want to use F#, but find there is no documentation out there? This tools helps with the conversion. It automates the hard the part of the co..
Lightning ChormoZome Utility提供了一种快速的定位方法 1. APex类 2. Visualforce页面 3.闪电页 (Flexi页) 4.自定义对..
Lightning ChormoZome Utility提供了一种快速的定位方法 1. APex类 2. Visualforce页面 3.闪电页 (Flexi页) 4.自定义对象包括自定义元数据和自定义设置 5.验证规则 6.配置文件 7.闪电光环组件 8.顶点触发器 9.Visualforce组件 10.电子邮件模板 11.静态资源 12.工作流
Kickstart the design of your Bubble™..
Kickstart the design of your Bubble™ app with access to pre-built responsive UI elements and learning resources. Buildshare provides convenient access to a library of pre-built res..
This extension will let you view bun..
This extension will let you view bunyan logs in pretty printed form. This extension lets you view the logs from text files in the similar manner as done from bunyan CLI. I use it t..

Live editor for CSS, Less & Sass插件下载

免费下载Edge商店