Compass Kompilieren und WordPress Themes

Wenn Sie ein WordPress Theme-Entwickler und ein Sass/Compass-Nutzer sind, erstens: toll, Sie sind großartig! Zweitens: Es gibt dieses kleine Problem bezüglich der Kompilierungsorte, das Ihnen wahrscheinlich begegnen wird, also lösen wir es jetzt.

Es gibt zwei sehr wichtige Dinge in Bezug auf CSS und WordPress Themes

1. In jedem Theme-Ordner muss unbedingt eine „style.css“-Datei vorhanden sein.
2. Diese Datei muss unbedingt mit einem Kommentarblock wie diesem beginnen

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

Wenn die Datei nicht vorhanden ist oder der Kommentarblock fehlt, erkennt WordPress das Theme nicht einmal.

Wenn Sie mit Sass/Compass arbeiten und ein **sehr einfaches** Stylesheet für Ihr Theme haben, vielleicht alles in einer Datei, und Sie nur einen Ordner wie diesen haben

/wp-content
  /themes
    /your-theme
       config.rb
       index.php 
       style.scss
       style.css

Ihre config.rb-Datei (für Compass) ist sehr Standard, wie diese

http_path = "/"
css_dir = ".."
sass_dir = ".."
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
environment = :development

Das ist in Ordnung. Sie sind bereit. Alles, was Sie tun müssen, ist, sicherzustellen, dass Sie ein „!“ in den Kommentaren am Anfang der style.scss-Datei verwenden, damit der Kommentar auch beim Kompilieren/Komprimieren erhalten bleibt

/*!
Theme Name: Your Theme

etc...
*/

Das Problem

Viele von uns haben keine so einfache Einrichtung. Ich arbeite gerne in kleinen Einheiten mit meinem Sass und packe nicht alles in eine Datei. Ich ziehe es vor, CSS- und SCSS-Ordner in meinem Theme zu haben. Wie

/wp-content
  /themes
    /your-theme
       /css
          site-sub-section.css
       /scss
          _grids.scss
          _normalize.scss
          _typography.scss
          site-sub-section.scss
       config.rb
       index.php 
       style.scss
       style.css

Das Problem ist, dass es keine Compass-Konfiguration gibt, die diese Kompilierungspfade zulässt.

Die Lösung

1. Stellen Sie Ihre Konfiguration auf den noch stärker standardmäßigen Kompiliervorgang des SCSS-Ordners in den CSS-Ordner ein.
2. Verschieben Sie den style.scss-Ordner in den SCSS-Ordner.
3. Verschieben Sie nach erfolgreicher Kompilierung von style.scss in style.css die style.css automatisch in den Stammordner.

Neues config.rb

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
environment = :development

Anscheinend wird jeder Code, den Sie in config.rb einfügen, bei jeder Kompilierung ausgeführt. Um #3 zu erreichen, können wir Ruby-Code schreiben, der ausgeführt wird, wenn bestimmte Ereignisse eintreten. In unserem Fall prüfen wir, wenn eine Stylesheet-Datei gespeichert wird (Compass hat sie kompiliert), ob die Datei „style.css“ heißt und verschieben sie dann ein Verzeichnis nach oben. Die puts-Anweisung dient nur dazu, dass Sie sie bei Bedarf von der Kommandozeile aus beobachten können.

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

Danke an Christopher Eppstein, dass er mir gezeigt hat, wie das funktioniert.