Compilación de Compass y temas de WordPress | Programar Plus

Si eres un creador de temas de WordPress y un usuario de Sass/Compass, primero, ¡sí, eres increíble! En segundo lugar, existe este pequeño problema que probablemente surgirá con respecto a las ubicaciones de compilación, así que resolvámoslo ahora.

Hay dos cosas muy importantes con respecto a los temas de CSS y WordPress:

1. Es absolutamente necesario que haya un archivo “style.css” en la carpeta del tema.
2. Ese archivo debe comenzar absolutamente con un bloque de comentarios como este:

/*
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).
*/

Si el archivo no está allí o falta el bloque de comentarios, WordPress ni siquiera reconocerá el tema.

Si está trabajando con Sass/Compass y tiene un realmente simple hoja de estilo para su tema, tal vez esté todo en un archivo y solo tenga un directorio como este:

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

Su archivo config.rb (para Compass) es súper estándar, así:

http_path = "https://css-tricks.com/"
css_dir = ".."
sass_dir = ".."
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
environment = :development

Esta bien. Estás listo. Todo lo que necesita hacer es asegurarse de usar un “!” en los comentarios en la parte superior del archivo style.scss para que, incluso cuando ocurra la compilación/compresión, el comentario permanezca:

/*!
Theme Name: Your Theme

etc...
*/

El problema

Muchos de nosotros no tenemos una configuración tan simple. Me gusta trabajar en pequeños fragmentos con mi Sass, no meter todo en un solo archivo. Prefiero tener carpetas css y scss en mi tema. Me gusta:

/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

El problema es que no hay una configuración de Compass que permita estas rutas de compilación.

No va a pasar, aparentemente. (Este es un directorio de temas de WordPress simplificado. Imagine que carga más archivos).

La solución

1. Establezca su configuración en el estándar aún más de compilar la carpeta scss en la carpeta css.
2. Mueva la carpeta style.scss a la carpeta scss.
3. Tras la compilación exitosa de style.scss en style.css, mueva automáticamente style.css a la carpeta raíz.

Nuevo config.rb:

http_path = "https://css-tricks.com/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"

output_style = :compressed
environment = :development

Aparentemente, cualquier código que coloque en config.rb ejecuta cada compilación, por lo que para lograr el #3 podemos escribir código Ruby para que se ejecute cuando ocurran ciertos eventos. En nuestro caso, cuando se guarda una hoja de estilo (Compass termina de compilarla), verificamos si ese archivo se llama “style.css” y, si es así, lo movemos hacia arriba en un directorio. El puts La declaración es solo para que pueda ver cómo funciona desde la línea de comando si lo desea.

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

Gracias a Christopher Eppstein por mostrarme cómo funciona esto.