fex-team / fis-parser-sass

A parser plugin for fis to compile sass file.
MIT License
16 stars 12 forks source link

让fis-parser-sass支持node 0.8.0+ #5

Closed 2betop closed 10 years ago

2betop commented 10 years ago

替换node-sass为fis-sass, 修改c++包装代码,已支持node 0.8.0+环境

qdsang commented 10 years ago

@2betop 太帅气~,要是能够支持下compass,岂不神级~

fouber commented 10 years ago

@2betop @qdsang

有了 fis-parser-sass 就可用用compass了啊,方法如下:

  1. 安装 fis-parser-sass 插件:

    npm install -g fis-parser-sass
  2. 下载 compass 框架
  3. 把compass框架中的 frameworks/compass/stylesheets 目录下的文件放到你的项目中,得到目录结构:

    project
     ┣ compass
     ┣ _compass.scss
     ┣ _lemonade.scss
     ┗ fis-conf.js
  4. 配置fis

    //项目排除掉_xxx.scss,这些属于框架文件,不用关心
    fis.config.set('project.exclude', '**/_*.scss');
    //scss后缀的文件,用fis-parser-sass插件编译
    fis.config.set('modules.parser.scss', 'sass');
    //scss文件产出为css文件
    fis.config.set('roadmap.ext.scss', 'css');
  5. 新建一个 scss 文件测试一下:

    @import "compass/layout/grid-background";
    
    a {
       background: get-baseline-gradient($color:255);
       font-weight: bold;
       text-decoration: none;
       &:hover { text-decoration: underline; }
       body.firefox & { font-weight: normal; }
    }
  6. fis release -d output
  7. 文件编译结果

    a {
     background: linear-gradient(bottom, #f00 5%, rgba(255, 0, 0, 0) 5%);
     font-weight: bold;
     text-decoration: none; }
     a:hover {
       text-decoration: underline; }
     body.firefox a {
       font-weight: normal; }