emmet之css语法_用Emmet涡轮增压CSS

最新推荐文章于 2025-12-24 10:29:31 发布

翻译最新推荐文章于 2025-12-24 10:29:31 发布 · 171 阅读

文章标签：

本文介绍Emmet如何简化CSS编写过程，通过使用缩写和快捷键，Emmet能快速生成完全格式化的代码，提高工作效率。从属性、值、单位到颜色，Emmet都能智能处理，甚至支持多属性组合。

emmet之css语法

Emmet上的大多数文章和教程都介绍了HTML的处理方法，但是今天我们将重点关注带有CSS的Emmet。准备增加CSS编写的费用了吗？我们走吧！

注意：建议您在继续之前对CSS有一定的了解。

Emmet是缩写的集合，这些缩写扩展为html / xml / css，进一步丰富了文本片段的概念。访问下载页面并为您选择的编辑器安装Emmet。

使用Emmet时，键入适当的缩写并按操作键。在Sublime Text中，这是TAB键。您正在处理的文件的语法将确定要使用的缩写。

Emmet使用常识缩写来简化代码编写。它可能会有所帮助，或者有所帮助，这取决于您花在学习前后上的时间。

Emmet（以前称为Zen Coding ）是网络开发人员的工具包，可以极大地改善HTML和CSS工作流程。

它不仅节省您的时间，而且使编写代码变得有趣。只需输入几个字符，然后看着它们神奇地扩展为完全格式化的代码即可！如果输入有误，请使用“撤消”按钮将扩展的代码还原为缩写，以供您编辑和再次扩展。

我还发现Emmet可以帮助我更轻松地记住代码。缩写很容易记住。 text-transform:变为“ tt”， text-align:justify; 成为“泰姬陵”。看看这有多大帮助？您将开始学习新CSS属性，而只需记住缩写。您甚至不必担心分号和空格，Emmet会为您完成这些工作！

让我们看看EmmetCSS缩写的基本组成部分以及它们如何加快工作流程。

CSS为属性提供值，例如字体大小，边距，填充等。

Emmet已使用缩写定义了每个已知CSS属性。所以border-bottom是bdb ， border-top是bdt 。以下是font-size的示例，它是fz 。

输入缩写后，按一下动作键（在我的情况下为TAB），Emmet会神奇地将缩写输出到有效CSS中，将光标放在需要的位置。

现在我们了解了属性，是时候添加值了。通过键入缩写词和所需的值来完成此操作。例如， fz18将输出为font-size: 18px; 。您不需要键入“ px”，因为Emmet将默认添加它。如果某个项目没有单位（例如font-weight ），则Emmet足够聪明，知道不添加px。

如果您不总是使用像素怎么办？ em ， rem ， % ， ex和px单位在Emmet中都可用。每个单元（尽管这似乎有些极端）也具有缩写形式：

要使用单位，只需在值的末尾附加单位的缩写。下面的示例使用em定义字体大小

一些属性（例如margin ）允许多个值。要使用Emmet做到这一点，请用破折号（ - ）分隔每个值。请看下面的示例，该示例定义了人体margin四个值。

Emmet要求您添加#而不是将其附加到您的值上。因此， #号位于您的属性之后，但位于您的值之前。不同数量的字符输出不同的十六进制代码。看一些例子：

这是将车身颜色定义为#111 （ c#1 ）的示例：

即使!important标签不应该经常使用，Emmet还是以防万一。添加一个感叹号! 缩写为：

现在我们对EmmetCSS函数有了基本的了解，是时候开始将它们组合在一起了。以类似于HTML函数的方式，您将为每个项目添加一个加号（ + ）。请记住，如果您弄乱了某些内容，则可以随时单击undo并修改字符串。

编写所有必需的属性和值，并用+隔开，然后按操作键以查看结果。

这是为body定义不同边距和填充的示例。

请记住，您可以一起使用所有这些缩写，也可以分别使用。这并不是要使Emmet编码完全正确，而是要使编写CSS更加容易。为了包装这些很酷的动画GIF，下面是一个快速演示样式的演示，它创建了一个带有一类panel的div。

Emmet是一个功能强大的工具。有人称它为“高速”编码工具，它使您可以花更少的时间一遍又一遍地编写相同的内容，而无需手动创建自己的代码片段。 Emmet受CSS选择器的启发，可在所有主要的文本编辑器中使用，以适合任何开发人员的工作流程。

请记住，您添加到工作流程中的任何新工具都将具有学习曲线，但是所花费的时间不会比弄清楚它如何工作更为必要。定期访问文档可以使人耳目一新，Emmet提供了备有所有可能功能的备忘单。旨在帮助您减少思考，编写更多代码！

在工作流程中如何使用Emmet？您最喜欢CSS函数是什么？让我们在评论中知道！

翻译自: https://webdesign.tutsplus.com/articles/turbo-charge-your-css-with-emmet--webdesign-16511

emmet之css语法