分类 Web Front End 下的文章

大多数关于Emmet的文章和教程都是在说明它对HTML的处理能力,但是今天我们要来关注一下Emmet的CSS部分。准备好来增强你的CSS手写能力了吗?让我们开始吧!

:在你阅读下面的部分之前,建议你先对CSS有一定的了解。


Emmet是什么?

Emmet采用文本缩写的方法,集合了不同的缩写,并且扩展为对应的html/xml/css。访问 下载页面 ,并为你的编辑器安装Emmet。

在使用Emmet编写代码时,输入适当的缩写,然后按下Emmet的功能键。在Sublime Text中,是TAB键。你正在处理的文件的语法将决定使用哪些缩写。

为什么要使用Emmet?

Emmet使用符合常识的缩写来简化编写代码的过程。它可以起到多大的作用,取决于你投入了多少时间去学习它的来龙去脉。

Emmet(以前叫做Zen Coding )是一个面向Web开发者的工具,它可以大大加快你的HTML和CSS的工作流程。
它不仅可以节省你的时间,还可以使编写代码的过程更加轻松愉快。只要输入很少的字符,然后看着它们神奇地扩展为格式完美的代码!如果产生了一些错误,撤销按钮可以将扩展后的代码变回原本的缩写形式,这样你就可以再次编辑并且将它扩展。

我同时还发现Emmet让我更加轻松地记住了代码。缩写毫无疑问更加易于记忆。 text-transform:对应 “tt” 和 text-align:justify; 对应 “taj” 。可以看到这会有多大的帮助。你将开始学习新的CSS属性并且只需要记住它的缩写。你甚至不需要担心分号和空格,Emmet为你解决这些事情!


Emmet和CSS

让我们来看看Emmet的CSS缩写的基本构成,以及它如何加快工作流程。

属性(Properties)

CSS对属性赋予相应的值,如 font-size,margin,padding,等等。

css-best-property-value

取自学习CSS的最佳方法

Emmet对每个已知的CSS属性定义了一个缩写。因此, border-bottom 就是 bdb , border-top 就是 bdt 。下面这个例子是 font-size ,也就是 fz 。

键入缩写之后,按下功能键(我的配置,TAB)和Emmet会神奇地将缩写扩展为有效的CSS,并且将光标移动到你会需要继续输入的地方。

Properties

值(Values)

现在我们已经了解了属性,是时候添加一个值了。这是通过键入缩写与所需的值的组合来完成的。例如,fz18 将会输出 “font-size: 18px; 。你不需要输入”px”,因为Emmet会默认添加它。如果一个项目没有单位(如 font-weight ),Emmet也足够聪明地知道不要添加 px。

Values

单位(Units)

如果你并不都是使用像素怎么办?em , rem , % , ex ,和 px 这些单位都可以在Emmet中使用。每个单位也有一个缩写形式(虽然这看起来可能有点极端):

  • px → 默认
  • p → %
  • e → em
  • r → rem
  • x → ex
    要使用一个单位,只需值的末尾加上单位的缩写。下面的例子是用单位 em 定义一个字体大小

Units

多个单位(Multiple Units)

某些属性,比如 margin ,允许多个值。要用Emmet做到这一点,就用破折号(-)分隔每一个值。来看看下面这个例子,它给 body 定义 margin 的四个值。

Multiple Units

颜色(Colors)

Emmet要求你在前面加上# ,而不是将加到值的末尾。所以 # 紧跟在你的属性后面,在值的前面。不同的字符数输出不同的十六进制代码。来看一些例子:

  • #1 → #111111
  • #e0 → #e0e0e0
  • #fc0 → #ffcc00
    下面是定义 body 颜色的一个例子,使用 #111 ( c#1 ):

Colors

!important

尽管 !important 标签不应该经常使用,Emmet 还是提供了它,为防万一。添加一个感叹号 ! 到你的缩写,像这样:

!important

多个属性(Multiple Properties)

现在,我们对Emmet的CSS功能的有了一个基本的了解,是时候开始把它们结合起来。像类似类似处理HTML的方式,你可以给它们每一个都添加一个加号(+)。请记住,如果你遇到了问题,你可以随时撤销并修改字符串。

写出你的所需的每一个属性和值,用 + 分隔它们,然后按下功能键来查看结果。

下面是为 body 定义不同的 margin 和 padding 的一个例子。

Multiple Properties

例子

记住,你可以组合或者独立地使用所有这些缩写。这不是关于怎样一次就使用Emmet写出正确地代码,只是让你更容易编写你的CSS。为了总结这些很酷的GIF动画,这里有个一个例子,快速创建一个 class 为panel 的 div。

例子

结论

Emmet是一个强大的工具。被一些人称为“高速”的编码工具,它可以让你花更少的时间一遍又一遍地写同样的代码,而无需手动创建自己的代码段。Emmet的灵感来自于CSS选择器,并且可以在所有主流的编辑器中使用,以适应任何开发者的工作流程。

请记住,你添加到你的工作流的任何新工具都会有一个学习曲线,但不要花费比你需要弄清楚它是如何为你工作这个过程更多的时间。定期查看文档是一个很好的复习,同时Emmet提供了一个 cheat sheet ,囊括了所有可用的功能。这是为了帮助你少一些思索,同时写更多的代码而建的!

相关链接

Original Page : Turbo-Charge Your CSS With Emmet

这是对我和 Valerii 在 MoscowJS 2013 上的演讲的一个小的补充。”JavaScript @ LiveJournal” (文字是俄语的,很抱歉)。

在LiveJournal上,我们经过了很长的一个过程,从jQuery UI的扩展到BackBone,最终转移到了AngularJS,到目前为止,一切都非常好,但是AngularJS有一些小的陷阱。

1、在页面上通过 pushState 来使用 $location 。

如果你想要使用 history.pushState 改变URL参数,来向旧的页面注入一些Angular代码,我想你会遇到一些很糟糕的情况。在我们的案例中,旧的代码修改了 location.search 之后,Angular会尝试通知所有的 Controller 这个变动,但是因为这个变动来自于非Angular代码,因此 digest 就会进入死循环。我想这应该是老版本代码中的一个bug,但是我们不想触发它,因此,我们需要找到某种方法来屏蔽掉它。问题在于,我们没有手动向任何一个 module 注入 $location。在通过一些追踪之后,我们发现,ng-include 依赖于 $anchorScroll,而这个方法在被调用时,会依赖 $location。在做了一些仔细的测试,以了解为什么 ng-include 需要这些之后,我们决定使用这样一个 hack :

angular.module('ourModule', []).value('$anchorScroll', null);

页面上没有$location,意味着没有events也就意味着没有死循环。

测试示例: http://jsbin.com/IxAGEzI/1

更新:issue 已经添加并确认 。

2、在 <form> 标签上使用 ng-app

这一点在这个 GitHub issue 上有更好的描述,在1.2版本之后应该会被修复。

3、过多的 scope.$apply()

$apply 是一个代价很大的操作。我们有一个叫做 lj-popup 的 directive,它的作用类似于 lj-popup=”popupState” 同时监视 document 文档上的点击。如果点击发生在 ng-app 作用的节点以外(或者按了 ESC 键),就将 popupState 设置为 false 。因此我们使用 $parse setter(assgin)来设置变量和 $apply 。如果页面上有许多 directive 实体,你会遇到一个问题。解决方法是使用常规的检测并且避免使用 $apply ,除非它是必要的。在 lj-popup 的例子中,我们检查 popup 是否是打开的,并且只有在打开的情况下触发 $apply 。

4、html5Mode 会禁用所有链接

这个问题非常简单,但是依然要说明一下。如果你向你的 module 注入了 $location 并且启用了 html5Mode ,页面上的所有链接会无法正常工作,因为 Angular 给它们加了 preventDefault 操作,并且转而依赖它自己的 router 。可以这样来解决这个问题

jQuery('div:not([target])').attr('target', '_self')

当然,如果链接是页面加载完成之后再动态生成的话,这会变的复杂的多。

原文地址:Angular JS pitfalls

版本变动主要影响,从1.4.0开始,.css(), .attr(), .val(), .html(),.text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(),.addClass(), .removeClass(), .toggleClass()接受function作为参数值。 toggleClass()可以同时操作多个class。

可以使用.delay()来推迟事件队列中之后的事件。

从1.6.0开始,如果目标属性没有设置,.attr()会返回undefined。

在1.7.0中,添加了一系列callbacks方法,可以用来对callback列进行操作。比如callbacks.add()添加,callbacks.disable()禁用,callbacks.remove()删除特定的,callbacks.empty()删除所有。

在1.9.0中,.attr()可以正确的设置类似checked的值,与.prop()不同的是,它直接使用相应的值来进行设置,而.prop()使用boolean值来设置。

移除了事件中的.toggle()。移除了.live()【可以用.on()来代替】和.die()【用.off()】。.addBack()取代了.addSelf()。

属性(attributes)部分。.html()可以直接转换string值到html。包括IE9在内,之前的IE浏览器,应该使用.empty().html(),以确保不会破坏文本节点。.toggleClass()的第二参数为boolean值,当它为true,则添加class,为flase则移除class。

应该使用.prop()来获取特定属性的值,因为.prop()会返回比如checked、selected、disabled等状态的正确的值。selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected都应该使用.prop()来获取和设置。而元素的其它值则推荐使用.val()来设置。

jQuery.noConflict()用来解除jQuery对$的控制,使得$可以被其他库使用。

CSS部分。1.6.0之后,.css()可以使用相对值,即通过+=、-=来设定值。它不能移除由stylesheet或者元素style值确定的css。但是在IE8及其以下版本中,会移除这些值。.offset()不能获取隐藏元素的位置,同时不会将body的margin,border,padding计算在内。.outerHeight()或者.outerHeight()在参数值为true的时候,会包含元素的margin值。

.data()可以使用HTML5中的data-*属性。

jQuery.fx.off可以关闭所有动画特效。在低性能设备上使用,或者在动画出现问题的时候。.animate()的属性应该是数值,不支持简写的CSS属性,动画过程中不会使不可见元素可见。大多数特效方法都包含duration和easing这两个可选参数,duration控制快慢(执行事件,默认为400,slow为600,fast为200,单位是毫秒),easing是变换方法(默认是swing,还有linear)。1.4.0开始,可以给每个属性设置不同的easing。

DOM操作。.append()如果目标是多个元素,则会分别在目标内插入。如果插入的是本文档的元素,那么只会移动该元素到目标位置,而不是复制它(如果有多个目标,同样分别插入到每个目标内。).appendTo()等也是一样。1.4.0开始,.before()和.after()可以对自封闭节点起作用,比如<div />。.text()中的string会被转义,因而不会作为HTML元素渲染。

事件(events)部分。.dblclick()绑定双击事件。event.metaKey检测功能键是否按下。event.preventDefault()用来阻止默认动作,比如a标签的跳转。event.target事件目标,可以和this比较来检测事件是否已经执行。.on()在1.7.0开始提供了绑定事件的所有功能,是最主要的事件绑定方式。.off()用来移除绑定的事件。.one()与.on()相似,但是它只处理一个目标元素。event.which用来检测键盘及鼠标的输入,包括鼠标左(1)中(2)右键(3)。可以使用event.data来给事件添加data值。

选择器(selectors)部分。:animated用来选择当时正在执行animation的元素。属性选择器中,=选择以给定值开头,通过连字符连接的属性的元素。~=选择通过空格分隔,包含给定值的属性的元素。*=选择包含给定值的属性的元素。$=选择以给定值结尾的属性的元素。!=不包含给定值。^=以给定值开头。:eq()选择器中,索引是从0开始的,如果值为负数,那么-1代表倒数第一个。

基础结构

  1. Closure的库结构和文件夹结构相对应,因此需要查找某个命名空间对应的文件时,可以按照库结构来查找。
  2. Closure的基本方法都在base.js中,因此需要先在文档中首先引用base.js。
  3. Closure中使用goog.provide(namespace)来定义命名空间。因此一种好的做法是,只定义一个全局命名空间,其他所有functions作为这个对象的属性。这种做法的好处是,所有的名称都集合在了一起,同时在使用多个库的情况下,避免了和其他库的命名空间冲突。
  4. 每一个命名空间都需要使用goog.require()来请求。
  5. goog.partial()和call()的不同在于,goof.partial()中,参数会被直接传递到function内执行。
  6. 在Closure中,object、function、array、string、number、boolean、Null、undefined都有对应的goog.isXXX()来进行判断。
  7. goog.isDef(value) 当value != undefined时返回true,null也是返回true。

各个主要的命名空间

  1. goog.string 包含了对string的处理,主要是string的转义。
  2. goog.array 包含了对数组的操作。
  3. goog.object 包含了对象操作。
  4. goog.json 包含了json的解析和序列化。
  5. goog.dom 包含了DOM元素的获取和操作。
  6. goog.dom.classes 包含了DOM元素的CSS类处理。
  7. goog.userAgent 检测用户useragent。
  8. goog.userAgent.product 检测用户浏览器。
  9. goog.style 包含了DOM元素的CSS样式的获取和设置。
  10. goog.function 包含了function的构建。
  11. goog.events 事件相关的方法。
  12. goog.ui UI控件。

涉及到的一些主要的方法。

  • goog.string.htmlEscape(str,opt_isLikelyToContainHtmlChars)
  • goog.array.forEach() 用来遍历数组中的所有元素。
  • goog.object.get(obj,key,opt_value)
  • goog.object.transpose(obj) 可以返回一个交换了键值和数据的对象。但是如果数据不是string的话,就不会出现在返回的对象中。
  • goog.dom.getElment(idOrElment)
  • goog.dom.getElmentsByTagNameAndClass(nodeName,className,elmentToLookIn)
  • goog.dom.getAncestorElmentsByTagNameAndClass(nodeName,className,elmentToLookIn) 包括元素本身
  • goog.dom.creatDom(nodeName,attributes,var_args) atrributes是一个对象,用来作为创建的元素的属性。如果attributes是string的话,就作为元素的class的值。第三个参数用来创建元素的子元素,可以同时创建多个。goog.creatDom()的返回值是一个node,可以使用在appendChild等方法中。
  • goog.dom.htmlToDocumentFragment(htmlstring) 返回值是node。
  • goog.dom.classes.get(element) 返回包含目标元素的class的数组。
  • goog.dom.classes.has(element,className) 如果目标元素包含相应的类名,返回true,否则返回false。
  • goog.dom.classes.add(element,var_args)
  • goog.dom.classes.remove(element,var_args) 添加或删除目标元素的类。
  • goog.dom.classes.toggle(element,className)
  • goog.dom.classes.swap(element,fromClass,toClass) 如果目标元素含有fromClass这个类,就将它替换成toClass。
  • goog.dom.classes.enable(element,className,enabled) 启用或者禁用元素的特定类。
  • goog.style.getPageOffset(elment) 获取元素相对HTML文档的位置(top和left)。
  • goog.style.getSize(element) 获取元素的高和宽。能够获取隐藏元素的值。包括hidden和display:none的元素。
  • goog.style.getBounds(element) 获取元素的位置信息,包括元素的PageOffset和Size。
  • goog.style.setOpacity(element,opacity) 设置opacity值,0-1,如果是空的话,就会清除opacity值。
  • goog.style.setInlineBlock(element) 设置元素的display属性为inline-block。
  • goog.style.setUnselectable(element,unselectable,opt_noRecurse) 设置文本可不可选。
  • goog.events.listen(eventSource, eventType, listener, [capturePhase, [handler]]) 五个参数分别是绑定事件的DOM对象,触发listener的事件种类(值为string的数组),事件监听器本身,(可选)控制监听器是否仅在捕获阶段被调用,(可选)指定监听器中this代表的对象。

Given an array that may contain nested arrays, return a flattened array. Input and out put are illustrated as follows.
将含有嵌套的数组转换成扁平化输出。*号部分为需要写出的代码。

var input = [{a: 'a'}, 'b', ['c', 'd'], ['e', ['f']], 'g'];
function flatten_array(arr){
    var out = [];
    *******;
    return out;
}

代码

var input = [{a: 'a'}, 'b', ['c', 'd'], ['e', ['f']], 'g'];
var out = [];

loop(input);

function loop(object) {
  for( var a in object ) {
    if( typeof(object) === 'object' ) {
      loop(object[a]);
    }else{
      out.push(object[a]);
    }
  }
}
console.log(out);

中文版链接:https://blinktunnel.github.io/imagecss-chinese/

在两个月时间里,断断续续地翻译了这个网站,去年的时候已经有这个打算,最初只是想给孩子们留一点可以参考的东西,执行力比较差,所以拖延了这么长的时间。

水平所迫,翻译难免有错误和不足之处,欢迎指出(联系方式在about页面)。

以后我会逐渐润色翻译。

关于imagecss.com:这是由Patrick Sexton所写的一个关于CSS的新手教程网站,主要涉及图片相关的CSS以及基本CSS布局。网站链接:http://www.imagecss.com/

预览图:

[caption id="" align="alignnone" width="618"]imageCSS 中文版 imageCSS 中文版[/caption]

[caption id="" align="alignnone" width="618"]Image CSS 关于这个网站 Image CSS 关于这个网站[/caption]

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

#000000可以缩写为#000 ; #336699可以缩写为#369;

盒尺寸

通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1
property:value1 value2; 表示 top 和 bottom 的值是 value1,right 和 left 的值是 value2
property:value1 value2 value3; 表示 top 的值是 value1, right 和 left 的值是 value2,bottom 的值是 value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

border-width:1px;
border-style:solid;
border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是 border:width style color;

背景(Backgrounds)

背景的属性如下:

background-color:#f00;
background-image:url('background.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

可以缩写为一句:background:#f00 url('background.gif') no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color: transparent;
image: none;
repeat: repeat;
attachment: scroll;
position: 0% 0%;

字体(fonts)

字体的属性如下:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-sizefont-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写 list-style:none;

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

可以缩写为一句:list-style:square inside url(image.gif);