apache google centos 程序员 nginx java 云计算 Python 微软 linux mysql shell Android Ubuntu 开源 Firefox Windows php 编程 wordpress

Web Essentials之HTML和CSS操作技巧

一些Javascript功能也可以用於TypeScript。

本篇目錄

功能

最小化HTML文件

選中要最小化的.html文件,然後在web essentials的菜單中選擇“Minify html file(s)”選項,即可生成一個.min.html文件,該功能類似於js和css文件的壓縮。具體操作以及效果見下圖:

577014-20160113220409616-1561048463.gif

Bundle Html文件

在解決方案瀏覽器中選擇2個或更多html文件,然後右鍵選擇"Create HTML Bundle File"。該功能簡化了使用SPA時bundle多個Html模板。具體操作如下動圖:

577014-20160113222347882-280823567.gif

图片悬停预览

当鼠标悬停在标签上时,会看到图片的预览:

577014-20160113222507710-1095007191.png

ZenCoding

ZenCoding語法

想要閱讀更多關於Zen Coding的語法,請點擊這裏。
ZenCoding是開源的,點擊查看Github上的源碼。下面通過一個動態圖演示一下:

577014-20160113224515444-1414379978.gif

Lorem Pixel生成器

作為ZenCoding的一部分,你也可以直接在Html編輯器中生成Lorem Pixel的代碼。只需要輸入pix-200x200-animals,然後按下TAB鍵,就會插入一張200x200的動物圖片。

577014-20160113230219647-323111305.gif

less

577014-20160113231130053-26213887.png


預覽窗口

LESS的預覽窗口位於編輯器的右邊,每當保存less文件時,就會展示編譯後的CSS內容。


577014-20160113231532944-64822716.png

提取到變量

Web Essentials簡化了將屬性值轉成LESS變量。選擇你想提取的文本,然後右鍵selection,點擊"Extract to variable..."。

577014-20160113232547913-1793424496.gif

 

延伸阅读

评论