compass项目配置文件config.rb

日期:2015-07-17 21:29:06

当我们创建一个compass项目时,在项目文件里能看到两个文件夹和一个配置文件,如下图所示:

1436964732358086.jpg

在使用compass编译代码时,可能会遇到多余的注释,以及图片路径问题。对于刚接触compass的人来说非常苦恼,可能找了半天也没有解决问题,今天就来讲讲config.rb对代码输出效果的影响。

第一次打开config.rb文件时是这样:

QQ截图20150717222716.png

先从第一行开始,require 'compass/import-once/activate'这句的意思是当我们重复引用某个sass文件时,只输出一次编译效果,这样说可能有点抽象,下面我们来举个例子。

首先,把require 'compass/import-once/activate'注释掉(在这句前面加一个“#”)。

然后在sass文件夹下创建一个_test.scss的文件,并加入如下代码:

body {
  background: #f5f5f5;
  font-style: 14px;
}

然后把_test,scss文件在screen.scss文件中重复引入两次。

@import "test";
@import "test";

接着编译一下看看效果:

/* line 1, ../sass/_test.scss */
body {
  background: #f5f5f5;
  font-style: 14px;
}

/* line 1, ../sass/_test.scss */
body {
  background: #f5f5f5;
  font-style: 14px;
}

我们发现两次引用的输出结果出现两次相同的代码,这显然不是我们想要的,在引入文件时多复制了一行就会产生垃圾代码,所以在修改config.rb文件时要留意一下,千万不要注释掉require 'compass/import-once/activate'。

有时会有特殊情况,我们不得不将一个sass文件重复引入两次,在require 'compass/import-once/activate'没有注释掉的情况下,想让代码重复输出呢,只需要在文件后加上“!”就行了。

@import "test";
@import "test!";

再次编译后会发现依然重复输出了代码,好吧,我还没想到什么时候会这样做。

配置文件根目录

继续往下看,会看到下面这样的几行配置:

http_path = "/" //项目根目录

css_dir = "stylesheets" //css文件放在stylesheets目录

sass_dir = "sass" //sass文件放在sass目录

images_dir = "images" //图片文件放在images目录

javascripts_dir = "javascripts" //js文件放在javascripts目录

这几行是告诉编译器我们的项目文件都放在哪些目录。当我们想把css目录改成style时,只需要把配置改为css_dir = "style"就行了。其余的以此类推。

缓存文件生成设置

当我们编译Sass文件时,在我们的根目录会出现.sass-cache文件夹,看文件夹名就知道这里放的该是Sass缓存文件,而它在我们项目开发中似乎没有什么用,当我们删除后再次编译它又会自动出现,想要它消失需要我们在配置文件中这样设置:

cache = false

设置完成后,在项目根目录删除.sass-cache文件夹,重启监听器,发现就不会自动生成Sass缓存了。


在浏览器调试

想想我们平时在开发者模式调试CSS的样子,然而scss也可以这样,如果我们的CSS使用sass编译生成的,就可以在调试模式看到scss原来的模样。首先打开chrome浏览器设置界面,找到如下选项把红框里的两项勾选上,这样浏览器就具有识别sourcemap的功能了。

QQ截图20151112162211.png

浏览器设置后回到配置文件中设置生成sourcemap的选项,在配置文件里加上这一句:

sourcemap = true

保存配置文件,然后重启compass监听,发现我们的css目录多出了后缀名为.map的文件,再回到浏览器调试模式时可以看到下图:

QQ截图20151112163206.png

点开后自动跳转到在scss文件相应的位置

QQ截图20151112163526.png

有了这个功能后我们就可以在浏览器调试scss了,这样真是太棒了。

输出样式output_style

当输出CSS代码时,可以通过output_style这一配置项来设置我们想要输出的代码风格,这里给了四个参数:expanded、:nested 、:compact、:compressed。默认的输出风格:expanded表示编译后保持原格式。

如果项目即将上线,就需要压缩CSS以确保文件尽可能的小,这时候只需要把output_style设置为:

output_style = :compressed

编译后输出的CSS风格是压缩后的,文件也会变小。注意,修改输出风格后需要重启监听器compass watch

资产相对路径relative_assets

这个配置默认情况下是关闭的,当我们使用compass精灵sprite输出图片时会发现输出的精灵图路径并不是我们要的,这时候只需要激活这个选项就好了。

relative_assets = true

激活后重启监听器,发现输出的路径已经是我们需要的了。

取消注释

在编译时会发现在编译后的CSS文件里会有一行行的注释,这样只会让我们的文件越来越大,想要取消注释就要激活这个配置:

line_comments = false

激活配置后重启监听器会发现CSS文件清爽了许多有没有。