compass项目配置文件config.rb的设置与详解

配置文件config.rb的设置与详解"/>

compass项目配置文件config.rb的设置与详解

compass项目配置文件config.rb

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

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

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

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

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

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

1 2 3 4

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

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

1 2	@import "test"; @import "test";

接着编译一下看看效果：

1 2 3 4 5 6 7 8 9 10 11

/* 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'没有注释掉的情况下，想让代码重复输出呢，只需要在文件后加上“！”就行了。

1 2	@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缓存文件，而它在我们项目开发中似乎没有什么用，当我们删除后再次编译它又会自动出现，想要它消失需要我们在配置文件中这样设置：

1	cache = false

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

 

在浏览器调试

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

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

sourcemap = true

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

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

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

输出样式output_style

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

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

1	output_style = :compressed

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

资产相对路径relative_assets

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

1	relative_assets = true

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

Compass默认把config.rb所在目录看成是根目录。如何可以实现让compass使用相对路径呢？

relative_assets = true可以实现。

例：

@import "compass";p{background:image-url('test.png');
}

没设置relative_assets = true 时生成的CSS：

p {background: url('/images/test.png?1475397292');
}

设置了relative_assets = true 后生成的CSS：

p {background: url('../images/test.png?1475397292');
}

 

取消注释

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

1	line_comments = false

 设置开发环境

# set the Compass compile environment
# enviroment = :production :development

environment = :production "上线环境”

environment= :development "开发环境"