Trabajar con Sass y Compass en WordPress

Sass y Compass en WordPress

Si quieres trabajar con Sass y Compass en WordPress para crear tu propio tema te recomiendo que te bases en uno tipo _s. Tiene un CSS mínimo y está pensado precisamente para crearlo desde cero.

Entiendo que ya utilizas Sass y Compass en tus proyectos, si no sabes de que te hablo empieza mirándote la estupenda presentación de Sass y Compass de Leandro D’Onofrio (@dzignus) y visita el “site” del proyecto http://sass-lang.com/ donde te explican en qué consiste y cómo instalártelo según tu sistema operativo.

Los pasos a seguir para trabajar con Sass y Compass en WordPress son muy sencillos:

  1. Copia tu tema en la carpeta wp-content/themes.
    Si quieres utilizar  _s, entra en su página y genera tu tema dándole un nombre. Las funciones, variables, etc, se crearán teniendo en cuenta el nombre que le pongas.
  2. Activa el tema en wordrpess
    Menú de la izquierda > Apariencia > Temas
  3. Crea el proyecto Compass en el directorio de “tu_tema” 
    Terminal: Accede a la carpeta wp-content/themes/tu_tema y ejecuta create compass

Configuración

Por defecto Sass crea un directorio llamado stylesheets donde se guardan los archivos .css, pero nosotros queremos que guarde el archivo en el raiz sobrescribiendo style.css. Para ello:

  1. Borramos styleheets
    No lo vamos a utilizar
  2. Editamos el archivo config.rb
    Buscamos la línea donde se indica el path y lo dejamos en blanco:css_dir = “”
  3. Renombramos el archivo screen.scss
    Entramos en la carpeta sass y cambiamos de nombre al archivo screen.scss por style.scss

Ya estás listo para empezar. Si quieres que tus archivos se compilen mientras trabajas accede desde el terminal al directorio de tu tema (wp-content/themes/tu_tema) y ejecuta compass watch.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *