compass项目配置文件config.rb
2017-01-18 23:21
246 查看
compass项目配置文件config.rb
当我们创建一个compass项目时,在项目文件里能看到两个文件夹和一个配置文件,如下图所示:在使用compass编译代码时,可能会遇到多余的注释,以及图片路径问题。对于刚接触compass的人来说非常苦恼,可能找了半天也没有解决问题,今天就来讲讲config.rb对代码输出效果的影响。
第一次打开config.rb文件时是这样:
先从第一行开始,require 'compass/import-once/activate'这句的意思是当我们重复引用某个sass文件时,只输出一次编译效果,这样说可能有点抽象,下面我们来举个例子。
首先,把require 'compass/import-once/activate'注释掉(在这句前面加一个“#”)。
然后在sass文件夹下创建一个_test.scss的文件,并加入如下代码:
有时会有特殊情况,我们不得不将一个sass文件重复引入两次,在require 'compass/import-once/activate'没有注释掉的情况下,想让代码重复输出呢,只需要在文件后加上“!”就行了。
配置文件根目录
继续往下看,会看到下面这样的几行配置: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缓存文件,而它在我们项目开发中似乎没有什么用,当我们删除后再次编译它又会自动出现,想要它消失需要我们在配置文件中这样设置:
在浏览器调试
想想我们平时在开发者模式调试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设置为:
资产相对路径relative_assets
这个配置默认情况下是关闭的,当我们使用compass精灵sprite输出图片时会发现输出的精灵图路径并不是我们要的,这时候只需要激活这个选项就好了。
取消注释
在编译时会发现在编译后的CSS文件里会有一行行的注释,这样只会让我们的文件越来越大,想要取消注释就要激活这个配置:相关文章推荐
- compass项目配置文件config.rb
- compass 配置文件config.rb中relative_assets的作用
- ASP.NET项目站点配置Web.Config文件
- 通过web.config文件配置项目中文件夹的访问权限
- 彻底摆脱配置文件 二 (开源项目zkconfigutil resolve自动生成)
- ASP.NET项目中的web.config文件里配置数据库连接并在程序代码中获取连接字符串
- 项目文件中含有两个config文件,app.config与app1.config,如何获取app1.config中的配置
- ASP.NET项目站点配置Web.Config文件【转】
- app.config项目配置文件读写
- 通过web.config文件配置项目中文件夹的访问权限
- asp.net项目中通过Web.config配置文件及文件夹的访问权限!
- 在ASP.NET项目中的web.config文件里配置数据库连接并在程序代码中获取连接字符串
- 在ASP.NET项目中的web.config文件里配置数据库连接并在程序代码中获取连接字符串
- 通过web.config文件配置项目中文件夹的访问权限
- asp.net项目中通过Web.config配置文件及文件夹的访问权限---forms
- 以前vs03项目中用到一个类:读写config文件配置信息
- asp.net项目中通过Web.config配置文件及文件夹的访问权限!
- app.config项目配置文件读写
- MTK项目配置文件ProjectConfig.mk解析
- 项目配置文件app.config/configuration/configSections