Sass 与Compass 在WordPress 主题开发中的运用
Sass 与Compass 在WordPress 主题开发中的运用
一直以来都抱着这样的态度去做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 设计师指南》。时间不够可以只看第一本。这两本书我都是在学校图书馆借到的，也许多少年后，对于我的大学生涯，我最感激的就是图书馆，以及那些有前瞻视角的图书订购员。