fis-parser-sass
Advanced tools
Comparing version 0.0.4 to 0.0.5
@@ -9,2 +9,3 @@ /* | ||
var sass = require('fis-sass'); | ||
var root = fis.project.getProjectPath(); | ||
@@ -14,5 +15,4 @@ module.exports = function(content, file, conf){ | ||
opts.data = content; | ||
opts.include_paths = conf.include_paths || [ file.dirname ]; | ||
opts.include_paths = conf.include_paths || [ file.dirname, root ]; | ||
return sass.renderSync(opts); | ||
}; |
{ | ||
"name" : "fis-parser-sass", | ||
"description" : "A parser plugin for fis to compile sass file.", | ||
"version" : "0.0.4", | ||
"version" : "0.0.5", | ||
"author" : "FIS Team <fis@baidu.com>", | ||
@@ -6,0 +6,0 @@ "homepage" : "http://fis.baidu.com/", |
@@ -1,25 +0,58 @@ | ||
# fis-parser-sass | ||
#在项目中使用sass和compass | ||
A parser plugin for fis to compile sass file. | ||
有了 ``fis-parser-sass`` 就可用用compass了,方法如下: | ||
## usage | ||
1. 安装 ``fis-parser-sass`` 插件: | ||
$ npm install -g fis-parser-sass | ||
$ vi path/to/project/fis-conf.js | ||
```shell | ||
npm install -g fis-parser-sass | ||
``` | ||
```javascript | ||
//file : path/to/project/fis-conf.js | ||
fis.config.merge({ | ||
roadmap : { | ||
ext : { | ||
//compile *.scss into *.css | ||
scss : 'css' | ||
} | ||
}, | ||
modules : { | ||
parser : { | ||
scss : 'sass' | ||
} | ||
1. 下载 [compass](https://github.com/chriseppstein/compass) 框架,把框架中的 ``frameworks/compass/stylesheets`` 目录下的文件放到你的项目中,得到目录结构: | ||
``` | ||
project | ||
┣ compass | ||
┣ _compass.scss | ||
┣ _lemonade.scss | ||
┗ fis-conf.js | ||
``` | ||
1. 配置fis | ||
```javascript | ||
//项目排除掉_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'); | ||
``` | ||
1. 新建一个 scss 文件测试一下: | ||
```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; } | ||
} | ||
}); | ||
``` | ||
``` | ||
1. fis release -d output | ||
1. 文件编译结果 | ||
```css | ||
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; } | ||
``` |
3599
12
59