Sivan's Blog http://lightcss.com 一念心清凈，走進極樂境。 Wed, 17 Apr 2013 10:35:59 +0000 zh-CN hourly 1 http://wordpress.org/?v=3.5.1 http://creativecommons.org/licenses/by-nc-sa/2.5/http://lightcss.com/http://feeds.feedburner.com/~fc/sivan?bg=99CCFF&fg=444444&anim=0Sivan's Blogsivanhttp://feedburner.google.comSubscribe with My Yahoo!Subscribe with GoogleSubscribe with PageflakesSubscribe with Live.com订阅到有道订阅到九点订阅到抓虾订阅到鲜果订阅到 QQ邮箱欢迎订阅我的Blog，主要分享一些互联网应用和我在做博客时的心得。FeedBurner的种子包含我博客的所有文章更新。所以，赶快订阅这里吧！ 在 WebStorm/PhpStorm 中开启对 Compass 的支持 http://lightcss.com/get-compass-support-in-webstorm-and-phpstorm/ http://lightcss.com/get-compass-support-in-webstorm-and-phpstorm/#comments Wed, 13 Mar 2013 13:23:51 +0000 Sivan http://lightcss.com/?p=254 继续阅读 →]]> 在最新的 WebStorm/PhpStorm 6 更新中，加入了一系列优秀的前端开发工具。其中的 File Watchers 功能可以自动编译诸如 Sass、SCSS、LESS、CoffeeScript 和 TypeScript 等预处理器语言。对我来说这是一个非常实用的扩展功能，通过它已经可以替代过去 CodeKit 所做的部分工作。但是 File Watchers 目前还缺乏对 Compass 框架的支持，这对使用 Sass/SCSS 的开发者来说影响是非常大的。

下面就说说如何配置 WebStorm/PhpStorm，使其对 Compass 提供良好的支持。

开启 File Watchers 对 Compass 的支持

安装 Compass

首先要确保系统已经安装了 Compass （需要 Ruby 环境）。如果「终端」中不存在 compass 指令则说明 Compass 还未安装，需要执行下面的命令：

$ gem install compass

在 File Watchers 中添加 Compass 配置文件

在 WebStorm/PhpStorm 设置里，找到项目设置中的「File Watchers」。点击 [+] 添加配置。可以看到许多内置模板，根据需要选择 SASS 或 SCSS。

Compass 配置文件

具体配置如下：

  • File type: SASS files 或 SCSS files
  • Scope: Project Files
  • Program: bash（Win 下可能是 C:\Ruby\bin\compass.bat）
  • Arguments: -login -c "compass compile"
  • Working directory: $ProjectFileDir$
  • Output paths: $FileNameWithoutExtension$.css 或留空

注意事项：

  1. 如果遇到奇怪的编译错误，可以把「Arguments」设置为 -login -c "compass clean && compass compile" 。
  2. 「Working directory」必须指向带有 Compass 配置文件 config.rb 的路径。一般在项目根目录，使用 $ProjectFileDir$ 即可。
  3. 如果你想让输出文件与 SCSS 文件在不同的路径，比如 SCSS 文件在 scss 目录，输出的 CSS 文件在项目根目录，那么只要把「Output paths」设置为 $ProjectFileDir$/$FileNameWithoutExtension$.css 就可以了。其他结构可以根据后面的「Insert macro...」自行设置；
  4. 如果觉得自动编译太讨厌，可以把「Immediate files syncchronization」自动编译关掉。

确认后保存设置。就可以通过 Compass 自动编译 SCSS 文件了。

如何忽略指定文件的编译

比起 CodeKit，File Watchers 还缺少一个快速忽略指定文件编译的功能。你只能采用 _filename.scss 这样在文件名开头加下划线的方式来指定忽略编译这个文件。当然出于模块化考虑，这样的命名方式本身是有好处的。

取消错误的语法检查

WebStorm/PhpStorm 默认的语法检查并不支持 Compass 语法，所以 @import "compass"; 会被错误警告。

解决方法：在「Project Settings - Inspection」里取消「SASS/SCSS」的「Cannot resolve import into sass/scss file」和「Unresolved mixin」这两个选项就不会乱报错了。

通过上面的设置，WebStorm/PhpStorm 已经可以很好的对 Compass 进行支持了。我想大部分使用 Sass/SCSS 的前端工作者都在用 Compass 框架，也希望 JetBrains 早日加入原生支持。

Copyright © Sivan's Blog, 2013. 作者：Sivan | 固定链接 | 一条评论
Tags: , , , , ,

]]> http://lightcss.com/get-compass-support-in-webstorm-and-phpstorm/feed/ 1 HTML5 重构的真相与糟糕的「语义化」新标签 http://lightcss.com/truth-about-structuring-html5-page/ http://lightcss.com/truth-about-structuring-html5-page/#comments Wed, 26 Sep 2012 15:02:39 +0000 Sivan http://lightcss.com/?p=218 继续阅读 →]]> 推荐看看这篇讲 HTML5 重构的文章，说到了目前 HTML5 新标签遇到的诸多问题。
http://www.netmagazine.com/features/truth-about-structuring-html5-page

“We shouldn’t use them.” 一句道破 HTML5 新标签面临的许多窘境。当你真正采用它们重构一个大型项目时，往往会发现这些所谓的“语义化”新标签是多么矛盾和啰嗦。尤其是对有代码洁癖、选择强迫症的人来书，会带来了一堆棘手的问题。

Update 2013.02.25：这不~本文发布后短短几个月，名为 <main>、<template> 的新标签又蹦出来了。

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 3 条评论
Tags:

]]> http://lightcss.com/truth-about-structuring-html5-page/feed/ 3 【视频】《Perfect Workflow in Sublime Text 2》视频教程全集打包 http://lightcss.com/improve-workflow-in-sublime-text-2-video-course/ http://lightcss.com/improve-workflow-in-sublime-text-2-video-course/#comments Wed, 26 Sep 2012 05:26:42 +0000 Sivan http://lightcss.com/?p=217 继续阅读 →]]> Sublime Text 2 是今年非常火的一款编辑器，这款轻便的编辑器提供了诸多功能实用的功能，「tutsplus」也做了一套教程，可以深入了解这款编辑器的各种功能。在线看的话有点慢，所以我把它打包到网盘了，如有失效请告知。

目录见这里：https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

百度网盘打包下载：
http://pan.baidu.com/share/link?shareid=61833&uk=1479479056

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 6 条评论
Tags: , ,

]]> http://lightcss.com/improve-workflow-in-sublime-text-2-video-course/feed/ 6 从右键菜单快速在 Sublime Text 2 中打开目录 http://lightcss.com/right-click-open-with-sublime-text-2/ http://lightcss.com/right-click-open-with-sublime-text-2/#comments Tue, 25 Sep 2012 13:28:28 +0000 Sivan http://lightcss.com/?p=211 继续阅读 →]]> 在《Perfect Workflow in Sublime Text》系列视频中，我看到了第三讲通过 Mac OSX 的「系统服务」快速在 Sublime Text 2 中打开目录的方法。跟着试了一遍，总是出错，其实还有更简单的方法，使用「Automator」自带的「打开 Finder 项目」模板即可。

  1. 首先打开「Automator」，在弹出的文稿类型中选「服务」；
  2. 在左侧的模板栏搜索「Finder」，找到「打开 Finder 项目」，拖到右侧空白区域；
  3. 设置打开方式为「Sublime Text 2」，上面设定为“服务”收到选定的「文件或文件夹」位于「Finder」；
  4. 保存项目，在目录或文件上右键就可看到「在 Sublime Text 2 打开」的快捷方式了。

如果「系统服务」项目太多出现了二级菜单，可以到「系统偏好设置…」-「键盘」-「服务」中去掉不需要的选项。

p.s. 活用「Automator」可以轻松实现更多功能。

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 2 条评论
Tags: , , ,

]]> http://lightcss.com/right-click-open-with-sublime-text-2/feed/ 2 一种通过伪元素实现的更好的图片替换技术 http://lightcss.com/better-image-replacement-technique/ http://lightcss.com/better-image-replacement-technique/#comments Mon, 17 Sep 2012 13:02:20 +0000 Sivan http://lightcss.com/?p=205 继续阅读 →]]>

昨天收到一条垃圾评论，内容是「多更新，要不然还以为您老人家去保卫钓鱼岛了呢」。所以今天说什么也得写一篇证明我还没那么热血。

在过去很长一段时间里，我们都习惯用负值 text-indent 的方法来进行图片替换。在最新的 HTML5 Boilerplate 中，我看到了一种新的图片替换技术。它采用 CSS 伪元素来实现，相对于以前的图片替换技术，它很好的解决一些手机浏览器的 bug，且没有属性覆盖的问题，并且不需要额外的标签。

.ir {
    overflow: hidden;
    *text-indent: -999em;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

在下面的范例中可以看到，伪元素设定为块元素，高度同容器一致，所以把文字顶到第二排去了，再结合 overflow:hidden; 将溢出的部分隐藏掉。面对不支持 :before 伪元素的 IE6/7，采用传统的负值 text-indent 方法。需要注意的是，采用这个图片替换技术后不能再对该元素设置 padding-bottom，否则文字会显示出来一部分。

这个图片替换的技术可以替换所有元素的背景（IE8+），不会出现需要 !important 的情况，对 SEO 非常友好，且向下兼容至 IE6。没有什么学习成本，现在就可以在自己的项目中换上这个技术了。

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 2 条评论
Tags:

]]> http://lightcss.com/better-image-replacement-technique/feed/ 2 通过 CSS3 根据子元素数量为其定义不同样式 http://lightcss.com/styling-children-based-on-their-number-with-css3/ http://lightcss.com/styling-children-based-on-their-number-with-css3/#comments Tue, 03 Jul 2012 09:10:55 +0000 Sivan http://lightcss.com/?p=192 继续阅读 →]]> 在 LEA VEROU 的博客翻到这么一篇文章——《Styling children based on their number, with CSS3》。原文谈到使用“:nth-child 伪类元素选择器”的方法在 2009 年被提出，LEA VEROU 又通过普通相邻选择器（General sibling combinator[1]）改良了一下。最终的代码很酷。

内容介绍

标题写的有些拗口，看看下面的例子应该可以明白。主要作用是无论父元素有多少子元素，都根据子元素的数量设定样式，而无需使用任何 class。

主要代码

/* one item */
li:first-child:nth-last-child(1) {
	width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
	width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
	width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
	width: 25%;
}

li:first-child:nth-last-child()部分，:first-child选择了第一个子元素，:nth-last-child()用来判断这个元素属于“几个之一”。li:first-child:nth-last-child(3)即选择属于倒数第三个li的同时还是第一个元素的情况，即共 3 个子元素时的第一个。

li:first-child:nth-last-child() ~ li通过普通相邻选择器为第二个之后的所有元素设定样式[2]。

同 table 的区别

实现类似效果的方法当然不只这一种，最常用的就是表格。LEA VEROU 指出了两点不同之处：

  1. 表格有着特别的含义，有时并不符合我们需要的语义；
  2. 表格对宽度的控制没有上面的灵活（例如上面的方法可以实现子元素不完整填充父元素）。

使用范围

:nth-last-child 浏览器支持

由于 :nth-child 直到 IE9 才被支持，所以这个技术在移动端使用更加安全。

相关链接

  1. 普通相邻选择器（General sibling combinator）[1]：W3C 相关文档；
  2. a~b 和 a+b 的区别[2]：W3C 相关文档；

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 6 条评论
Tags: ,

]]> http://lightcss.com/styling-children-based-on-their-number-with-css3/feed/ 6 使用 Better Touch Tool 和 Jitouch 让 Magic Mouse 更好地工作 http://lightcss.com/make-magic-mouse-work-better/ http://lightcss.com/make-magic-mouse-work-better/#comments Sun, 03 Jun 2012 13:12:37 +0000 Sivan http://lightcss.com/?p=175 继续阅读 →]]> 前段时间我的 Logitech V470 鼠标左键坏掉了，由于自己之前拆开清过灰，所以失去了保修。把它扔到墙角吃灰后，从同事那借来了 Magic Mouse 一用。Magic Mouse 是苹果推出的一款蓝牙触控鼠标，借助下面两款小工具，可以实现许多不错的功能，让它增色不少。

Jitouch 2

Jitouch 是一款售价 $6.99 的 Magic Mouse/Trackpad 增强工具，对 Magic Mouse 上的手势识别率非常高，此外还可以设置触控板的一些增强手势。可以说不光是 Magic Mouse 用户，所有 MacBook 用户都值得一用。

我的 Jitouch for Magic Mouse 设置如下（图1）：

图一

此图设置为拇指区域为中键；三指上下左右滑动分别对应“显示桌面”、“Mission Control”、“前一个标签”、“后一个标签”

我的 Jitouch for Trackpad 设置如下（图2）：

图2

三指上下左右滑动分别为：滚到顶部、滚到底部、前一个标签、后一个标签。

Jitouch 尽管是个收费应用，但是由于识别准确度较高，还是值得一用的。

Better Touch Tool

俗称“BTT”的免费鼠标/触控板增强工具。由于 Jitouch 不支持 Magic Mouse 左右键区域轻拍的动作，所以需要用 Better Touch Tool 来弥补一下。
图三

需要注意的是，BTT 对 Magic Mouse 内置动作的识别似乎不是很灵敏。有时候因为识别不出反而让人感到火大，所以不用 Magic Mouse 的朋友我建议只用 Jitouch 即可。

最终效果

在同时开启这两款插件后，基本实现了下面的功能：

  • Magic Mouse 左键、右键区域轻触即可按下；
  • Magic Mouse 中心区域滑动等同鼠标四向滚轮；
  • Magic Mouse 拇指区域对应鼠标中间；
  • Magic Mouse 实现快速切换标签；
  • 更多的触控板手势：三指代表应用手势，四指代表系统手势。

总算让 Magic Mouse 在功能上丰富了一些，也不用一直按硬梆梆的按键了，所有操作全部触控搞定。

不过我最后要说的是，由于 Magic Mouse 定位不准和手感不太好的原因，我在使用一周后还是重新买了有线鼠标 Razer DeathAdder 来使用，Better Touch Tool 我也卸了。

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 没有评论
Tags: ,

]]> http://lightcss.com/make-magic-mouse-work-better/feed/ 0 去掉 Evernote Clearly 在 Chrome 右键菜单中的选项 http://lightcss.com/evernote-clearly-context-menu/ http://lightcss.com/evernote-clearly-context-menu/#comments Thu, 31 May 2012 03:43:44 +0000 Sivan http://lightcss.com/?p=169 继续阅读 →]]> Evernote Clearly（中文版名为“印象笔记·悦读”）是一个提高网页阅读体验的浏览器插件，它可以将网页快速过滤到多余内容，让你安心阅读正文。功能类似于 Readability，但是 Clearly 本地转换，速度快了很多。

美中不足的是 Chrome 版插件在工具栏有一个按钮，也支持快捷键，却还加了一个不能去掉的右键菜单项，每次看见这个多余的东西都难受。

去掉的方法很简单：

  1. 进入 Chrome 扩展文件夹的 “iooicodkiihhpojmmeghjclgihfjdjhj”目录；
    图1
  2. 用编辑器打开 background.html 文件，注释掉 26 行～34 行有关“context menu”的代码（不同版本可能位置不一样）；
    图2
  3. 保存文件，重启 Chrome 即可看到效果。
  4. 注：每次插件升级都需要重新修改。

去掉后右键菜单终于变干净了，心里舒服多了。当然我更希望官方可以提供隐藏右键菜单的设定，因为 Evernote Clipper 是有这个设定的。

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 3 条评论
Tags: ,

]]> http://lightcss.com/evernote-clearly-context-menu/feed/ 3 [Mac]使用系统自带的词典程序快速取词翻译 http://lightcss.com/mac-dictionary/ http://lightcss.com/mac-dictionary/#comments Fri, 17 Feb 2012 08:46:56 +0000 Sivan http://lightcss.com/?p=157 继续阅读 →]]> 在 Win 时代，我最爱的词典工具是 Lingoes，免费而且可以快速取词。在 Mac 下我却一直找不到一个好用的词典程序，以至于在浏览器里保存了一个“QQ 词典”的 Bookmarklet。后来才发现最好用的东西，原来一直在自己手里。苹果系统自带的词典就非常好用，可以添加词典并支持屏幕快速取词，非常方便。


安装中文词典

Mac 系统词典默认没有英汉词典，目前可使用 DictUnifier 导入星际译王的词库。

DictUnifier 这个小工具可以快速转换星际译王的词典并自动添加到系统中。只需在星际译王词库下载词典后，拖入 DictUnifier 转换（直接将 .tar.bz2 的压缩包拖进去）， 然后等待解压转换至完成（耗时约十几分钟，需耐心等待）。

推荐《朗道英汉字典》、《牛津现代英汉双解词典》、《现代汉语词典（修正版）》这三个词典。现代汉语词典上中学时应该都买过，方便查生僻字词的解释和拼音。如果需要删除词典，到“~/Library/Dictionaries”目录删除对应的 .dictionary 文件即可。

安装后在“字典”的“偏好设置”里调整词典的查询顺序，把本地词典都放在前面，最后放个维基百科可以在线查询更多解释。

鼠标取词

在任何文字区域上按下 control+cmd+D 就可呼出取词窗口，词典会根据鼠标的位置自动取词（不用启动词典程序哦～）。当然你也可以先选定字词再按快捷键获取更精确的查询内容，非常方便。我试了 Safari、Chrome、QQ、Sublime Text 2 等都支持系统自带的鼠标取词，Firefox 目前还不可以。

更多使用

在 Spotlight 中，也可以快速通过系统词典查询词汇。而安装 Alfred 的用户亦可直接从中查询，呼出 Alfred 后输入“define + 词语”即可。

如果你有其他心得，不妨交流一下 :D

-- EOF --

Copyright © Sivan's Blog, 2012. 作者：Sivan | 固定链接 | 21 条评论
Tags:

]]> http://lightcss.com/mac-dictionary/feed/ 21 解除网页禁止右键和禁止选字的 Bookmarklet http://lightcss.com/a-bookmarklet-to-unlock-right-button/ http://lightcss.com/a-bookmarklet-to-unlock-right-button/#comments Wed, 14 Dec 2011 12:33:12 +0000 Sivan http://lightcss.com/?p=155 继续阅读 →]]> 很多网站为了防止别人复制内部的文字，都使用了 oncontextmenu 来防止右键。但是想快速看看他写的代码也有点麻烦，所以我写了段 js 来解除，只要把下面的链接拖到书签栏就可以快速使用了，不包成功。

全部解除

使用后可以解除右键、选择拖动和粘贴的锁定。

Copyright © Sivan's Blog, 2011. 作者：Sivan | 固定链接 | 9 条评论
Tags: ,

]]> http://lightcss.com/a-bookmarklet-to-unlock-right-button/feed/ 9