Cómo integrar el preprocesador SaSS en WordPress

Si estás buscando mejorar la eficiencia de tu diseño web en WordPress, integrar un preprocesador como SASS es una excelente opción. SASS (Syntactically Awesome Style Sheets) es una extensión de CSS que facilita el manejo de estilos de forma más organizada, reutilizable y escalable. En este artículo, te explico paso a paso cómo puedes integrarlo en tu sitio de WordPress y algunos ejemplos de su uso práctico.

¿Qué es SASS y por qué utilizarlo en WordPress?

CSS es el lenguaje utilizado para dar estilo a las páginas web, pero a medida que un proyecto crece, mantener grandes hojas de estilos puede volverse complicado. Aquí es donde SASS brilla: introduce características avanzadas como variables, anidación, mixins y funciones, lo que te permite escribir CSS de forma más eficiente y limpia.

Por ejemplo, si estás usando un color principal en varios elementos de tu sitio, en lugar de tener que modificar cada instancia si decides cambiarlo, con SASS puedes definir una variable y cambiarlo en un solo lugar.

Pasos para integrar SASS en WordPress

La integración de SASS en WordPress puede lograrse mediante varios enfoques. Aquí, te explicaré dos de las formas más sencillas y comunes.

Opción 1: Utilizar un tema hijo con Gulp.js o Webpack

Crear un tema hijo: Primero, crea un tema hijo de tu tema de WordPress. Esto es importante, ya que te permitirá hacer cambios sin modificar directamente los archivos del tema original.

Instalar Node.js: Para usar herramientas de compilación como Gulp o Webpack, necesitas instalar Node.js en tu computadora. Puedes descargarlo desde su sitio web oficial (https://nodejs.org).

Configurar tu entorno:

• Abre tu tema hijo en tu editor de código favorito.
• En la raíz del tema hijo, abre una terminal y corre el comando npm init para crear un archivo package.json. Este archivo se usará para gestionar las dependencias de tu proyecto.

Instalar Gulp o Webpack: Ahora, debes instalar una herramienta que te permita compilar SASS a CSS. Aquí lo haremos con Gulp:

npm install gulp gulp-sass --save-dev

Configurar Gulp: En la raíz de tu tema hijo, crea un archivo gulpfile.js y añade la siguiente configuración básica para compilar SASS a CSS:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// Tarea para compilar archivos .scss a .css
gulp.task('sass', function() {
    return gulp.src('./sass/**/*.scss') // Directorio donde se encuentran los archivos .scss
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css')); // Directorio donde se guardará el CSS compilado
});

// Tarea por defecto que observa los cambios en los archivos .scss
gulp.task('default', function() {
    gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});

Crear tus archivos SASS: Crea una carpeta llamada sass en la raíz de tu tema hijo y añade tus archivos .scss. Por ejemplo, podrías crear un archivo style.scss que contenga:

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-family: Arial, sans-serif;
}

h1 {
  color: darken($primary-color, 10%);
  text-align: center;
}

Ejecutar la compilación: En la terminal, corre el comando gulp y este observará cualquier cambio en los archivos .scss para compilarlos automáticamente en CSS. Tu archivo style.css será generado en la carpeta css.

Incluir el CSS en WordPress: Finalmente, para que WordPress utilice este CSS compilado, debes asegurarte de que el archivo generado sea incluido en el tema. En el archivo functions.php de tu tema hijo, agrega el siguiente código para registrar el CSS:

function enqueue_custom_styles() {
    wp_enqueue_style('theme-styles', get_stylesheet_directory_uri() . '/css/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Opción 2: Utilizar un Plugin de WordPress

Otra opción más rápida para quienes no están familiarizados con la terminal o herramientas como Gulp es utilizar un plugin que facilite la integración de SASS directamente en WordPress. Hay varios plugins disponibles que permiten compilar SASS directamente desde el panel de control de WordPress.

Instalar un plugin de SASS: Uno de los más populares es WP-SCSS. Puedes instalarlo desde el repositorio oficial de plugins de WordPress siguiendo estos pasos:

1. Ve al panel de administración de WordPress.
2. Navega a Plugins > Añadir nuevo.
3. Busca «WP-SCSS» e instálalo.

Configurar el plugin:

1. Una vez activado, ve a la configuración del plugin en Ajustes > WP-SCSS.
2. Allí puedes definir la carpeta donde se encuentran tus archivos .scss (generalmente /sass) y dónde quieres que se guarden los archivos CSS compilados (por ejemplo, /css).

Crear archivos SASS: Crea tus archivos .scss dentro de la carpeta definida (ej. /sass/style.scss) y el plugin se encargará de compilar automáticamente el archivo CSS. Puedes utilizar las mismas reglas de SASS que vimos en el ejemplo anterior.

Incluir el CSS compilado: WP-SCSS ya se encarga de incluir el archivo CSS compilado, por lo que no es necesario registrar el archivo manualmente en el functions.php.

Ejemplo de uso práctico con SASS

Imaginemos que estás diseñando un sitio para una tienda de ropa. En el siguiente ejemplo, usamos variables y mixins de SASS para simplificar la gestión de colores y fuentes.

// Variables
$primary-color: #e74c3c;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, sans-serif';

// Mixin para botones reutilizables
@mixin button-styles($color) {
  background-color: $color;
  border: none;
  padding: 10px 20px;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: lighten($color, 10%);
  }
}

// Estilos globales
body {
  font-family: $font-stack;
  background-color: #f5f5f5;
}

// Aplicar mixin a diferentes botones
.btn-primary {
  @include button-styles($primary-color);
}

.btn-secondary {
  @include button-styles($secondary-color);
}

Con este código, puedes cambiar el color principal o los estilos de botón en un solo lugar, sin necesidad de modificar cada regla de CSS individualmente. Esto te ahorra tiempo y mantiene el código limpio y fácil de mantener.

---

Integrar SASS en WordPress no solo mejora la organización y escalabilidad de tu CSS, sino que también te permite aprovechar características avanzadas que el CSS puro no ofrece. Ya sea mediante la configuración de un entorno de desarrollo con Gulp o Webpack, o utilizando un plugin como WP-SCSS, cualquiera de estas opciones te permitirá disfrutar de los beneficios de SASS en tu proyecto WordPress.