LESSCSS学习笔记

所属：LESSCSS

把.css文件当作.less文件处理

之前在整理老项目时，发现有些样式文件以前是没用 Less 来编写，那如何把旧的样式文件当做 Less 来解析呢？

1
2
@import (less) "demo.css";
……

这样引用进来，demo.css 就会被当作成 Less 文件来解析了。
但是这里要注意一下，如果指定了某个文件是 Less 但是没有包含后缀名，Less 将不会自动添加后缀名。

变量插值

在做活动页面时，交付给后端同学后，他要活动页面里用到的所有图片都放到 CDN 上面去，他告诉我他的做法是一个个 Ctrl+F，问我有没有更好的做法呢？由于样式是用 Less 写的，这就变得容易多了，类似 JavaScript 那种字符串拼接的做法，把前半部分路径提取出来，哈哈！

1
2
@imagePath: "../img/";
background-image: url("@{imagePath}/demo.jpg");

在要注意的地方是不能直接引用变量，要以 @{变量名} 的方式才拼接行，不然会报错的耶~！

参考资料

MAMP里面PHP修改后没实时更新

所属：Tools

在用 MAMP(v2.2) 开发时，遇到了一个问题，每次修改完 PHP 文件，再刷新浏览器后都没能实时显示出修改后的内容，每次都必须等待一会后再刷新才能显示出来，请教 Google大神 才发现是 PHP cache 没设置好的原因。

解决的方法如下:

  1. 先找到 /Applications/MAMP/bin/php/php5.5.3/conf/php.ini 这个文件
  2. 然后把里面的 opcache.revalidate_freq=60 改成 opcache.revalidate_freq=0
  3. 最后再重启下 MAMP

注意路径千万别搞错..

Mac建立软链接

所属：Learning

今天在做活动页面时，发现要找个 PSD 文件竟然要 cd 深入5、6层才能找到，当然这也可能是目录本身设计的时候就有问题的，由于这目录是 SVN 上的，大家公用的东西不好大整改，只能另想办法解决了。

这时候软链接就该派上用场，先看看 Linux 链接使用说明。

软链接

1
2
3
4
5
ln [option]  source_file dist_file
   -f  建立时将同档案删除
   -i  删除前进行询问
   -s  建立软链接
   ln source dist 建立硬链接

如何建立软连接呢？

假如psd当前所在的路径为/Users/username/Dropbox/html5/ext_project/wolf_tooth/events/dragon_boat_festival/psd

1
ln -s /Users/username/Dropbox/html5/ext_project/wolf_tooth/events/dragon_boat_festival /dargon_boat_festival

这样软链接就建立起来了

实际应用

1
2
3
4
5
// 没建立软链接之前
cd ~/Dropbox/html5/ext_project/wolf_tooth/events/dragon_boat_festival/psd
// 建立软链接后
cd ~/dragon_boat_festival/psd

轻轻松松的少敲好几个英文单词，顺便也学习了软链接是如何使用的。

参考资料

EJS模板特殊字符转义

所属：EJS, Node.js

在做 Todos 项目的过程中，遇到了个特殊字符转义问题，主要是为了防止被 XSS，因此在用户输入完内容后，提交时需对其特殊字符进一步处理。

在 EJS 模板中，字符串输出时默认是经过 escape 转义编码的，让我们来了解下 <%- 变量 %> 和 <%= 变量 %> 这两种输出方式的区别

  • <%= 变量 %>
    用 = 号输出，就会被 escape 转义编码，但是当我们想动态生成 HTML 标签时，这种方式可能会有点问题
  • <%- 变量 %>
    用 - 号输出原始内容，不会被 escape

到这里似乎还没有解决如何防止被 XSS 的问题哦。
是的，但是答案已经出来了。

我们直接翻翻 EJS 模板源码看看它自带的 escape 方法是如何实现的？
然后把它摘过来，在用户输入完内容提交时用这个方法直接处理下就ok了。

参考资料

Markdown里如何生成表格

所属：Tools

最近在用 Markdown 写作工具来为项目里写一些文档时，遇到了个问题，如何在 Markdown 里添加表格呢？
后来通过 Google 发现，原来 Markdown 官方默认是没有提供的，只能自己写 HTML 代码来实现的。

由于在 MAC 下有个APP叫做 Mou ，它里面默认是支持表格的，具体写法如下：

1
2
3
4
5
日期    |   内容    |   备注
------ | ------ | ------
2014.05.16 | Markdown表格1 | 测试
2014.05.16 | Markdown表格2 |
2014.05.16 | Markdown表格3 | 测试

到里就完成了。

参考资料