以前弄scss只能在ruby下面, nodejs版less.js已经比较成熟, 而sass.js(1)不支持scss(后面作者又去开发Stylus了~), 后面出现的scss-js(2)已经错过时机(支持scss语法有限, 已很久没更新了).
这大概是导致目前less在国内爆发的一个原因吧. 排除环境依赖影响, 个人感觉sass比less好很多, 相信不少同学也这样认为~
对比了目前的4种css预处理语法: sass(scss)/less/stylus/closure-stylesheets, 还是更喜欢scss.
用nodejs写小工具蛮适合的, 但之前苦于sass在nodejs下没有比较好的package. 终于node-sass(3)出现, 目前npm里最好的sass package, 测试了一些scss文件基本都OK, 语法有误时也会返回错误信息.
基于node-sass写了个小工具, 监听项目目录, 当文件夹里的.scss文件被修改则立即编译成css文件, 使用:
1. sudo /path/scss.js # 载入已写好的配置, 侦听多个项目;
推荐这种方法, 把多个项目的配置信息写到 scssConfig.js中, 不需要额外的参数.
2. sudo /path/scss.js -build # 读取所有的.scss并编译成.css文件;
3. sudo /path/scss.js -clear # 清除错误日志(如果配置了 scssConfig.js里logDir的路径);
4. sudo /path/scss.js /path/project1/ /path/lib/ # 临时监听project1目录, lib为.scss里@import的path(无@import,可以省略);
源码放在: https://github.com/kairyou/f2e-tools/tree/master/scss
附送使用node-sass时遇到的问题以及解决方法:
1. error reading values after :
读取value出错, 可能是颜色错误不是6位或3位, 比如:color:#abcde;
2. .scss里面写: @charset "UTF-8"; 会报错: top-level blockless directive must be terminated by ';'
@see: https://github.com/andrew/node-sass/issues/23
3. error reading values after opacity / progid
使用: unquote("..."); @see: https://github.com/hcatlin/libsass/issues/72
文中提到的sass几个package的link:
1) sass: https://github.com/visionmedia/sass.js
2) scss: https://github.com/bmavity/scss-js
3) node-sass: https://github.com/andrew/node-sass
有了nodejs版, 其他语言(非ruby), 比如PHP的phpsass/scssphp等就可以忽略了~