当前位置:Gxlcms > html代码 > WebEssentials之HTML和CSS操作技巧_html/css_WEB-ITnose

WebEssentials之HTML和CSS操作技巧_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:29人阅读

返回Web Essentials功能目录

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

本篇目录

  • 功能
  • ZenCoding
  • LESS

最小化HTML文件

选中要最小化的.html文件,然后在web essentials的菜单中选择“Minify html file(s)”选项,即可生成一个.min.html文件,该功能类似于js和css文件的压缩。具体操作以及效果见下图:

Bundle Html文件

在解决方案浏览器中选择2个或更多html文件,然后右键选择"Create HTML Bundle File"。该功能简化了使用SPA时bundle多个Html模板。具体操作如下动图:

图片悬停预览

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

ZenCoding

ZenCoding语法

想要阅读更多关于Zen Coding的语法,请 点击这里

ZenCoding是开源的,点击查看 Github上的源码 。下面通过一个动态图演示一下:

Lorem Pixel生成器

作为ZenCoding的一部分,你也可以直接在Html编辑器中生成 Lorem Pixel 的代码。只需要输入 pix-200x200-animals ,然后按下TAB键,就会插入一张200x200的动物图片。

预览窗口

LESS的预览窗口位于编辑器的右边,每当保存less文件时,就会展示编译后的CSS内容。

提取到变量

Web Essentials简化了将属性值转成LESS变量。选择你想提取的文本,然后右键selection,点击"Extract to variable..."。

人气教程排行