CSS中Zen Coding
值别名
有几个常用的别名:
p
→%
e
→em
x
→ex
可以用这些别名来代替完整的单位:
w100p
→width: 100%
m10p30e5x
→margin: 10% 30em 5ex
颜色值
支持16进制地颜色值,例如: c#3
→ color: #333;
。#
符号是值的分隔符,所以不需要使用连字符做分隔。例如 bd5#0s
展开成 border: 5px #000 solid
: 。5
被从颜色值的 #
到 s
(solid
的别名)从颜色中分隔出来,因为 s 不是16进制的字符,不需要用
-
分隔符。
可以以 1个、2个、3个或者6个数字的形式书写颜色值:
#1
→#111111
#e0
→#e0e0e0
#fc0
→#ffcc00
当 css.color.short
引用 可用时(默认),类似 #ffcc00
这样的值会自动简化成 #fc0
。也可以根据 css.color.case
引用自动改变大小写。
无单位的值
一些 CSS 属性被定义为无单位,例如 lh2
→ line-height: 2;
,fw400
→ font-weight: 400;
。
这些值是: 'z-index
、 line-height
、 opacity
和 font-weight
,可以利用 css.unitlessProperties
引用来覆盖它们。
!important 修饰符
可以在任何 CSS 缩写后面添加 !
下标来获得 !important
值:
p!+m10e!
将生成
padding: !important;
margin: 10em !important;
Vendor 前缀
CSS3 的新特性为 web 程序员带来了福音:很少的几行代码就能完成几年前近乎不可能实现的任务。但同时这些特性对带来了痛苦:必须为不同的浏览器编写多个相同的属性。 CSS 解析器有一个很奇妙的特性,可以显著提高编写 CSS3 的体验。每次在 CSS 属性或缩写前添加连字符,自动为每个属性创建带有 vendor 前缀的副本。例如,-bdrs
缩写将展开成:
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;
此外,在支持 tabstop 的编辑器(例如 Eclipse、 Sublime Text 2、 Espresso 等)中,将建立值占位符,程序员可以输入属性值并自动放到全部生成的属性中。
它如何工作?
展开前面带有连字符的缩写时,删除连字符并在 snippets.json
查找剩余的缩写的片段定义。例如 -bdrs
缩写将会在 snippet.json
中查找 bdrs
定义,定义的内容如下:
"bdrs": "border-radius:|;"
也就是说 bdrs
将被展开成 border-radius
属性。如果定义没有找到,缩写本身将被当成 CSS 属性名。
经过 CSS 解析器计算出的属性将被输出,它将查找特定的在特定的 vendor 分类是否出现。这些分类定义设置中的 css.{vendor}Properties
分支。 {vendor}
是浏览器的 vendor 前缀,例如 webkit
、 moz
等。
如果扩展属性在这些分类中被找到,它们的 vendor 前缀将用作前导属性。否则,所有的前缀将被使用。
例如,border-radius
被定义在 css.webkitProperties
和 css.mozProperties
中,所以这个属性的输出将带有 webkit
和 moz
前缀。另一种情况,foo
属性没有定义在任何 vendor 分类中,所以在展开 -foo
缩写时,将输出所有可用的前缀:: webkit
, moz
, ms
and o
.。它对眼下所实现的那些前沿的 CSS 属性特别有用。
假设 Google Chrome 昨天刚刚实现了 super-foo
,而你现在就想在项目中使用它。可以使用 -super-foo
属性,展开结果如下:
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
默认添加前缀属性
在编写 CSS 文件时,也许要查找不带有 vendor 前缀变量的 CSS3 的 “clear” 属性。这会使编写类似 -trf
(trf
是 transform
的别名) 这样带有前导连字符的缩写很尴尬。
这也是为什么默认情况下 Emmet 会有 css.autoInsertVendorPrefixes
选项的原因。这个属性生效,所有定义在 vendor 分类中的 CSS 属性都将被自动提供匹配的 vendor 前缀变量。
这意味着,无需使用连字符来为已知的 CSS 属性获取有效的前缀变量,直接展开 bdrs
或 trf
缩写就可以得到有效的 vendor 前缀属性。
明确地 vendor 前缀
有时可能会想要输出仅带有指定 vendor 前缀属性的 CSS 属性。
假定想要输出仅带有 webkit
和 moz
前缀的 transform
属性,可以编写如下缩写:
-wm-trf
正如所见到的那样,我们通过添加一个字符前缀列表对缩写略作修改。在这种情况下,添加的是 w
(webkit
) 和 m
(moz
) 前缀。Emmet 的单字母前缀如下:
w
:webkit
m
:moz
s
:ms
o
:o
模糊查找
如果查阅 总览表,就会发现有许多 CSS 片段要记忆。而且它们中的一部分为了分隔逻辑变得很长。
为了使 CSS 的编写更简单,Emmet 为 CSS 片段实现了模糊查找逻辑:每次输入一个未知的缩写,Emmet 总是试图找到相似的片段定义。
例如,作为 ov:h
(overflow: hidden;
) 缩写的替代,可以输入 ov-h、
ovh
或者干脆输入 oh
。参见下面的示例。演示了 bxz:cb
、ovx:h
和 pos:a
片段的不同示例。
CSS中Zen Coding的更多相关文章
- HTML中Zen Coding
嵌套运算符 嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置:将其放在内部或成为相邻的元素. 子: > 可以使用 > 运算符指定嵌套元素在另一个元素内部: div>ul> ...
- 结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- vim 中 也可以 直接安装 emmet 直接使用zen coding 生成 l指定个数的 lorem ipsum文字.
超链接的写法: 当作为链接的文字, 比较长时, 整个作为链接 就显得不是 很适合. 可以取其中的某一个单词 作为 超链接的 关键字:如: click here to continue emmet中如何 ...
- Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- 如何在Dreamweaver中使用zen coding
在我发表上一篇<Zen Coding: 一种快速编写HTML/CSS代码的方法>之后,有网友表示不知道怎么在Dreamweaver上使用zen coding插件.OK,今天我就写一篇详细的 ...
- zen coding一个牛的不行的html和css开发工具
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- 我也来谈谈使用Zen Coding快速开发html和css原理
zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...
- 关于Zen Coding:css,html缩写
zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件,其安装也是非常简单,只要安装插件,然后在项目中拷贝js文件就可以.像Webstorm6.0.2中已经包含这样的插件.什 ...
随机推荐
- 《数字图像处理原理与实践(MATLAB版)》一书之代码Part5
<数字图像处理原理与实践(MATLAB版)>一书之代码Part5 本文系<数字图像处理原理与实践(MATLAB版)>一书之代码系列的Part5.辑录该书第225至第280页之代 ...
- 在发送信息时应用PendingIntent.FLAG_UPDATE_CURRENT
1. 连续发送两条信息时,出现bug.以下是bug现象描述. 发送第一条信息,sentReceiver弹出toast告知发送成功,同时在listview中的发送状态立即同步更新为发送成功. 继续发送第 ...
- 持续集成工具hudson
2008-07-08 一.什么是持续集成 持续集成的核心概念 CI 过程会经常构建软件组件:在许多情况下,每当源代码存储库(比如 Subversion 或 ClearCase)中的代码发生变化时, ...
- GCD 容易让人迷惑的几个问题
写在开头: 本文旨在阐述一些大家容易产生迷惑的GCD相关内容,如果是需要了解一些GCD概念或者基础用法,可以看看这两篇文章:GCD 扫盲篇.巧谈GCD . 目录: 迷惑一:队列和线程的关系 迷惑二:G ...
- lsof命令详解(转)
lsof命令详解(转) 上一篇 / 下一篇 2011-06-09 21:56:41 / 个人分类:Linux 查看( 351 ) / 评论( 0 ) / 评分( 0 / 0 ) 在Linux中,ls ...
- js跨域问题解释 使用jsonp或jQuery的解决方案
js跨域及解决方案 1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说, ...
- 16条Android开发小经验
1. TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以sp为单位的. 所以如果直接用返回的值来设置会出错,解决办法是 用setTextSiz ...
- Andoird通信之简单聊天ChatApp
Android通信,大体上的逻辑是跟Java上的通信是差不多的,只是因为Android线程不能直接访问UI界面组件,所以在处理的时候有些麻烦,只要是通过Handle处理. 接下来是一个简单地手机聊天A ...
- 【Oracle】Oracle中复合数据类型
1,常见的操作数据库的技术有那些 jdbc 使用java 访问数据库的技术 PLSQL (procedure 过程化sql) 在数据库内部操作数据的技术 proc/c++ ...
- 开源的PaaS平台
原文地址:https://blog.csdn.net/mypods/article/details/9366465 1.Stackato Stackato 是一个应用平台,用来创建私有.安全和灵活的企 ...