A parser plugin for fis to compile sass file.
JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit 49bafea Jan 19, 2016 @2betop 2betop ignore _*.scss
Permalink
Failed to load latest commit information.
test upgrade libsass to 3.1.0 Jan 26, 2015
.gitignore upgrade libsass to 3.1.0 Jan 26, 2015
.npmignore upgrade libsass to 3.1.0 Jan 26, 2015
LICENSE.md init Jun 29, 2013
README.md Update README.md Sep 15, 2015
compile.js upgrade libsass to 3.1.0 Jan 26, 2015
index.js ignore _*.scss Jan 19, 2016
package.json ignore _*.scss Jan 19, 2016

README.md

fis-parser-sass

已停止更新,请移步至:https://github.com/fex-team/fis-parser-node-sass

安装与使用

全局安装

npm install fis-parser-sass -g

开启插件

fis.config.merge('modules.parser', {
    sass : 'sass',
    scss: 'sass'
});

fis.config.merge('roadmap.ext', {
    sass: 'css',
    scss: 'css'
});

插件配置

fis.config.set('settings.parser.sass', {
    // 加入文件查找目录
    include_paths: []
});

在项目中使用sass和compass

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

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

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

    project
      ┣ compass
      ┣ _compass.scss
      ┣ _lemonade.scss
      ┗ fis-conf.js
    
  3. 配置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');
  4. 新建一个 scss 文件测试一下:

    @import "compass/layout/grid-background";
    
    a {
        background: get-baseline-gradient(rgba(255, 0, 0, 0));
        font-weight: bold;
        text-decoration: none;
        &:hover { text-decoration: underline; }
        body.firefox & { font-weight: normal; }
    }
  5. fis release -d output

  6. 文件编译结果

    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; }