一直以来都抱着这样的态度去做WordPress主题开发：每一次都尽量用上新接触的知识去开发WordPress（比如说开发移动主题接触移动Web 开发），我相信这才能更好地贯彻“温故而知新”。最近开发的免费博客主题Bevework 便运用了最近接触的Sass 与Compass 。

这篇文章主要是小讲Sass 与Compass 在WordPress 主题开发中的运用，核心的技术Sass 自然不会提及。因此，如果你想要这篇文章对你有用的话，最好是先接触下Sass。

style.css 在根目录的问题

熟悉WordPress 开发的自然知道style.css 对于一个WordPress 主题的重要性。然而在Sass 与Compass 中，因为配置上的原因，一般是将scss 及css 文件放在以此命名的文件夹中，但WordPress 确是要style.css 放在主题根目录下。因此，我们必须是的每次写完style.scss 文件后自动生成的style.css 能够自动移动到主题根目录下。

大概你也想到了，必须借助config.rb 这个配置文件，这个文件在整个Compass 项目中的作用应该也不用我多解释了吧？针对上面我提到的问题，css-tricks 上有一个配置代码，能够将编译生成的style.css 自动移动到根目录下；语言是Ruby，如果你也不懂Ruby，那就照猫画虎吧。

require 'fileutils'
on_stylesheet_saved do |file|
  if File.exists?(file) && File.basename(file) == "style.css"
    puts "Moving: #{file}"
    FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
  end
end

注意原来的配置是类似下面这个：

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

这样当你通过compass watch 监视文件改动，每次编译后就会自动移动style.css到主题根目录，终端中显示如下：

style.css 的注释问题

按照WordPress 的开发要求，style.css 的头部必须有如下类似的主题相关信息（注释）供系统必要时使用：

/*
Theme Name: Bevework
Theme URI: http://devework.com/
Version: 1.0
Author: Jeff
Description: BeveWork主题，免费的博客主题，DeveWork.com 诚意出品；
*/

但如果你直接在style.scss 写入这个注释编译后会被注释掉的。如果你熟知Sass 中注释的写法你应该知道怎么写了，对的，style.scss 头部必须这么写：

/*!
Theme Name: Bevework
Theme URI: http://devework.com/
Version: 1.0
Author: Jeff
Description: BeveWork主题，免费的博客主题，DeveWork.com 诚意出品；
*/

其实，我的style.scss 头部是这个：

@charset "utf-8";//必须设置了这个才能编译有中文的注释

熟悉的人自然秒懂。

一个WordPress 的Compass 插件

这个是我在看《Sass与Compass实战》这本书的时候在作者的Github 上看到的，Github 地址点击这里。不过我感觉没必要所以没有去尝试使用过。

多说一句，如果是想通过书籍学习接触Sass与Compass，可以参考的书籍有两本：上面提到的《Sass与Compass实战》及《Sass和Compass 设计师指南》。时间不够可以只看第一本。这两本书我都是在学校图书馆借到的，也许多少年后，对于我的大学生涯，我最感激的就是图书馆，以及那些有前瞻视角的图书订购员。