fis-parser-sass

A parser plugin for fis to compile sass file.

npm install fis-parser-sass
18 downloads in the last day
43 downloads in the last week
62 downloads in the last month

在项目中使用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($color:255);
         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; }
    
npm loves you