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 设计师指南》。时间不够可以只看第一本。这两本书我都是在学校图书馆借到的,也许多少年后,对于我的大学生涯,我最感激的就是图书馆,以及那些有前瞻视角的图书订购员。

评分:
5.00 avg. rating (85% score) - 2 votes
云左主机 广告
5 条 评论
  1. guojitang

    请问下我添加上述移动文件的ruby代码到config.rb之后,每次只能手动编译才会成功而且移动成功,一旦我设置成compass watch就会报错。错误提示为:
    LoadError on line [’54’] of d:cannot load such file –hitimes/hitimes
    Run with –trace to see the full back trace

    回复
    • 不好意思不清楚,没遇到这类情况

      回复
  2. Bruno

    最后一句话不错!

    回复
  3. 博主分享的文章基本上都是技术方面的,想必是个牛逼人物额。

    独立ip主机终身3.8折。。。。。。。

    回复
发表评论