fis-parser-sassokoala

    0.0.3 • Public • Published

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

    Keywords

    Install

    npm i fis-parser-sassokoala

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    none

    Last publish

    Collaborators

    • dapixp