Un proceso de desarrollo en WordPress usando Sass y Compass

() translation by (you can also view the original English article)

En este artículo, veremos cómo usar Sass y Compass en nuestro proceso de desarrollo de temas de WordPress. Estructuraremos nuestras hojas de estilo temáticas de manera SMACSS y aprovecharemos el poder de Compass para generar imágenes de imagen tanto para dispositivos de retina como de no retina.

Tenga en cuenta que este artículo no es una introducción a Sass; sin embargo, si usted es un principiante, siéntase libre de seguirlo.

Requerimientos

Antes de saltar, asegúrese de que tiene Sass y Compass instalados en su máquina. Si aún no los ha instalado, siga las instrucciones en:

Hay pocas aplicaciones Sass y Compass basadas en GUI, pero usaré el Terminal (si está en Windows, entonces puede usar el Símbolo del sistema). Siéntete libre de usar la herramienta con la que te sientas más cómodo.

Configuración del proyecto

Empecemos creando una carpeta para nuestro proyecto. Crea una nueva carpeta en tu escritorio y llámala tutsplus. Dentro de ella se crean dos nuevas carpetas: sass e imáges. La carpeta sass contendrá nuestros archivos Sass que formarán nuestra hoja de estilo del tema, el style.css.

Abra la carpeta images y cree dos nuevos directorios para nuestros iconos temáticos. Llama a los directorios icons e icons@2x. Más adelante, usaremos las imágenes de estas carpetas para crear sprites de imagen para nuestro tema. En este punto, la estructura de sus carpetas debe tener el siguiente aspecto:

Figure 1 The Folders structure — La estructura de las carpetas.

Configuración de Compass

Usaremos Compass para watch los cambios de archivos dentro de la carpeta sass y, cuando ocurra un cambio, utilizará Sass para compilar nuestras hojas de estilo. Cada vez que iniciamos Compass, buscará un archivo de configuración en el directorio actual. Ese archivo se llama config.rb.

Para crear el archivo de configuración, abra su terminal y navegue a la carpeta tutsplus en su escritorio:

1	cd /Desktop/tutsplus/

Luego llame al comando compass config config.rb. Este comando de relleno genera el archivo de configuración para usted. Abra el archivo en su editor de texto favorito y realice los siguientes cambios:

Cambie de css_dir = "stylesheets" a: css_dir = "/". Esto le indicará a Compass que genere los archivos CSS generados dentro de nuestra carpeta de raíz de tema, ya que aquí es donde WordPress buscará nuestro style.css del tema.
Establezca su estilo de salida preferido para el CSS generado. Aquí, lo estableceré en estilo expandido escribiendo en la línea 12 output_style = :expanded.
Descomente las líneas 14 y 17 eliminando el símbolo de hash anterior para que las siguientes líneas parezcan a relative_assets = true y line_comments = false.

Guarda tus cambios. Ahora su archivo config.rb debería verse como el siguiente:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Esté atento a los cambios

¡Todo bien! Ahora que tenemos el archivo de configuración, es el momento de crear nuestro primer archivo Sass. Crea un nuevo archivo dentro de la carpeta sass y llámalo style.scss. A continuación, inicie su Terminal y navegue al directorio /Desktop/tutsplus/.

Ejecutar el comando compass watch. Este comando iniciará un proceso que buscará continuamente los cambios de archivos Sass dentro de nuestra carpeta sass. Encontrará nuestro archivo style.scss y generará su representación CSS como style.css dentro de nuestro directorio tutsplus.

Tenga en cuenta que todos los archivos dentro de nuestra carpeta sass cuyos nombres no comienzan con guión bajo se procesarán y generarán en la carpeta tutsplus. Esto es exactamente lo que queremos para el archivo style.scss.

Una cosa importante a recordar: no haga cambios directos dentro de los archivos CSS generados, ya que sus cambios se perderán una vez que vuelva a compilar sus archivos Sass.

Descomponer

Vamos a separar nuestro style.scss en pequeños componentes utilizando las guías de estilo definidas en SMACSS (Arquitectura escalable y modular para CSS). El autor de SMACSS es Jonathan Snook y ha publicado un libro sobre este tema que les invito a leer. Si eres miembro de Tuts+, puedes descargar una copia desde aquí.

SMACSS clasifica sus reglas de CSS en cinco grupos:

Base
Diseño
Módulo
Estado
Tema

Vamos a crear una carpeta para cada una de esas categorías dentro de nuestra carpeta sass. Utilice los siguientes nombres: base, layouts, modules, states y themes.

Figure 2 Our SMACSS folder structure — Nuestra estructura de carpetas SMACSS

Base

En su carpeta base, coloque todas sus hojas de estilo que cumplan con las Reglas de estilo base de SMACSS. Esas hojas de estilo deben aplicar estilos solo en los selectores de elementos. Este es también un buen lugar para poner tu navegador para restablecer CSS.

Compass viene con reinicio del navegador basado en la hoja de estilo de reinicio de Eric Meyer. Para este proyecto, voy a utilizar normalize.css. Descargue el archivo normalize.css y colóquelo dentro del directorio base, luego cambie su nombre a _normalize.scss. Asegúrese de cambiar su extensión de archivo de css a scss.

A continuación, debemos importar la hoja de estilo normalize en nuestro style.scss. Para hacer esto abre el style.scss y agrega:

1	// Base
2	@import "base/normalize";

Como puede ver, estamos omitiendo el guión bajo en el nombre del archivo y su extensión. El preprocesador Sass es lo suficientemente inteligente como para importar el archivo que queríamos.

Diseños

Aquí, coloque sus estilos de diseño de tema. Por ejemplo, esto incluirá su encabezado, barra lateral, pie de página y diseños de página como _header.scss, _sidebar.scss, _footer.scss y _page.scss.

Puede usar el prefijo l- para sus nombres de clase de diseño:

// _header.scss
.l-main-header {
    margin: 30px;
    padding: 20px;
    font-size: 16px;
}

// _navigation.scss
.l-main-nav {
    position: relative;
}

Este es también un buen lugar para su hoja de estilo de cuadrícula. También puede leer más sobre las reglas de diseño de SMACSS.

Módulos

Los módulos son elementos de contenido reutilizables. Por ejemplo, una publicación de blog es un módulo en el que sus reglas se reutilizan en varias instancias del mismo módulo.

Los widgets, códigos cortos e íconos también son un tipo de módulo.Un módulo puede contener submódulos. Aquí hay un ejemplo de módulo widget y su submódulo de título:

1	<li class="widget">
2	<h4 class="widget__title">Recent Posts</h4>
3	</li>

.widget {
    padding: 10px;
}

.widget__title {
    font-size: 15px;
}

Aquí estamos usando la convención de nomenclatura de clase BEM (modificador de elemento de bloque).

Estados

Coloque aquí sus hojas de estilo que controlan la apariencia de sus elementos dependiendo de algún estado. Si está creando un tema de respuesta, haga clic aquí en su hoja de estilos de consultas de medios.

Vamos a crear uno ahora mismo.

Cree un nuevo archivo en su editor de texto y guárdelo como _media_queries.scss en la carpeta /sass/states/. Pegue estas reglas comunes de tamaño de pantalla dentro del archivo:

1	/*! =Media Queries
2	-------------------------------------------------------------- */
3
4	/* 956-768px */
5	@media only screen and (min-width: 768px) and (max-width: 959px) {
6
7	}
8
9	/* 767-480px */
10	@media only screen and (min-width: 480px) and (max-width: 767px) {
11
12	}
13
14	/* 479px */
15	@media only screen and (max-width: 479px) {
16
17	}

No olvide importar nuestra hoja de estilos recién creada en nuestro archivo style.scss:

// Base 
@import "base/normalize";

// States 
@import "states/media_queries"

Si tiene, por ejemplo, un menú de navegación fuera de la pantalla, aquí puede colocar los estilos que controlarán la apariencia cuando su navegación se abra o se cierre, .is-open o .is-closed, pero en la mayoría de los casos los colocará en el archivo de diseño o módulo. para la navegación off-canvas.

Temas

Este es un buen lugar para poner los estilos de sus complementos personalizados de WordPress. Por ejemplo, aquí puede colocar sus estilos personalizados para, por ejemplo, el complemento Contact Form 7.

Información del tema

El archivo style.css de cada tema de WordPress debe contener metainformación sobre el tema, como el nombre del tema, el autor, la versión y más. Podemos aprovechar las variables de Sass para cambiar esa información para cada tema que creamos.

Primero cree un nuevo archivo llamado _vars.scss y guárdelo dentro de la carpeta sass. En este archivo pondremos todas nuestras variables. Si encuentra que este archivo crece demasiado, separe su contenido en archivos más pequeños.

Abra el archivo recién creado e ingrese las siguientes variables:

// Theme Information
//--------------------------------------------//
$theme_name: "My Theme";
$theme_uri: "#";
$theme_description: "My WordPress Theme";
$theme_version: "1.0";
$theme_author: "my name";
$theme_author_uri: "#";
$theme_license: "GPL";
$theme_tags: "responsive-layout, post-formats";

Ahora necesitamos crear un archivo que usará las variables anteriores. Con el editor de texto que elija, cree un nuevo archivo llamado _theme_info.scss y guárdelo en la carpeta sass. Llene el _theme_info.scss con el siguiente contenido:

/*!

Theme Name: #{ $theme_name }
Theme URI: #{ $theme_uri }
Description: #{ $theme_description }
Version: #{ $theme_version }
Author: #{ $theme_author }
Author URI: #{ $theme_author_uri }
License: #{ $theme_license }
License URI: License.txt
Tags: #{ $theme_tags }

*/

El paso final es importar nuestros archivos recién creados dentro de style.scss, también importemos los componentes de Compass:

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// States 
@import "states/media_queries";

Ahora, si abre el archivo style.css procesado, contendrá el bloque de comentarios de información del tema de WordPress con los valores de las variables que estableció en el archivo _vars.scss.

Ayudantes

Es una buena práctica usar clases CSS más genéricas más pequeñas para diseñar un elemento en lugar de usar un selector demasiado específico. Sigue el principio DRY - No te repitas. Podemos crear una hoja de estilo para nuestras clases de pequeños ayudantes. Para darles un ejemplo, definiré algunos ayudantes de diseño y tipografía.

Cree un nuevo archivo llamado _helpers.scss y guárdelo dentro de la carpeta sass. Nuevamente, al igual que con el archivo de variables, si su archivo auxiliar es demasiado grande para mantener, considere dividirlo en archivos más pequeños.

Abre el archivo recién creado y pégalo en:

/*! =Helpers
-------------------------------------------------------------- */

// Layout
//--------------------------------------------//
.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}

.hide {
    display: none;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.clearfix {

    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.center-block {
    display: block;
    margin: 0 auto;
}

// Typography
//--------------------------------------------//
.f-normal {
    font-weight: normal;
}

.f-bold {
    font-weight: bold;
}

.f-italic {
    font-style: italic;
}

.t-strike {
    text-decoration: line-through;
}

.t-overline {
    text-decoration: overline;
}

.t-underline {
    text-decoration: underline;
}

.t-left {
    text-align: left;
}

.t-right {
    text-align: right;
}

.t-center {
    text-align: center;
}

Como puede ver aquí, estamos usando el prefijo f- para las clases relacionadas con la fuente y t- para las clases relacionadas con el texto. Guarda tu archivo e impórtalo dentro de style.scss:

@import "compass";

@import "vars";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// States 
@import "states/media_queries";

Generando Sprites

Compass viene con métodos prácticos para generar sprites de imagen. Colocaremos nuestros íconos dentro de nuestras carpetas icons e icons@2x, donde estos últimos contendrán los mismos íconos pero en el doble del tamaño para dispositivos con pantalla retina.

Para este ejemplo, pondré dentro de dos archivos de iconos: checkmark.png y star.png que puedes encontrar en el paquete de descarga asociado con esta publicación.

Para cada ícono generaremos una clase de CSS por separado utilizando una lista Sass con todos los nombres de archivo de íconos. Abra el archivo _vars.scss y agregue el siguiente código:

// Icons
//--------------------------------------------//
// map *.png icon files
$icons_sprite: sprite-map( "icons/*.png" ); 
$icons_sprite2x: sprite-map( "icons@2x/*.png" );

// generate the icons sprites
$sprites_file: sprite-url( $icons_sprite );
$sprites2x_file: sprties-url( $icons_sprite2x );

$sprites_url: url( "images/" + sprite-path( $icons_sprite ) );
$sprites2x_url: url( "images/" + sprite-path( $icons_sprite2x ) );

// list with theme icons file names (found in icons and icons@2x folders)
$theme_icons: ( "checkmark", "star" );

Compass encontrará todos los archivos de imagen *.png dentro de nuestras carpetas de iconos y generará dos sprites de imagen en la carpeta images. Ahora queremos generar clases de CSS para esas imágenes.

Para encontrar la posición del icono dentro de la imagen del sprite, crearemos dos mixins de ayuda. Para hacerlo, cree un nuevo archivo y llámelo _mixins.scss, luego ábralo y péguelo en el siguiente código:

// Icons
//--------------------------------------------//
@mixin sprite_icon( $name, $sprite ) {
    
    @include sprite-dimensions( $sprite, $name );
    background-position: sprite-position( $sprite, $name );
}

@mixin retina_sprite_icon( $name, $sprite ) {
    
    $pos: sprite-position( $sprite, $name );
    background-position: nth( $pos, 1 ) nth( $pos, 2 ) / 2;
    @include background-size( ceil( image-width( sprite-path( $sprite ) ) / 2 ) auto );
}

Ambas combinaciones están aceptando un nombre de icono más un mapa de sprites como argumentos. Esos mixins establecerán el ancho, la altura y la posición de fondo para el icono dentro del sprite de imagen generado. El retina_sprite_icon también establecerá el tamaño de fondo adecuado para los iconos de retina.

Ahora es el momento de generar nuestras clases de iconos. Cree un nuevo archivo llamado _icons.scss y guárdelo dentro de la carpeta /sass/modules/. A continuación, pegue dentro del siguiente contenido:

/*! =Icons 
-------------------------------------------------------------- */
@if ( length( $theme_icons ) > 0 ) {

    .icon {
        display: inline-block;
        background: $sprites_url no-repeat;
    }
                
    @each $icon in $theme_icons {
        
        .#{ "icon--" + $icon } {
            
            @include sprite_icon( $icon, $icons_sprite );
        }
    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1),
    only screen and (        min-device-pixel-ratio: 2),
    only screen and (                min-resolution: 192dpi),
    only screen and (                min-resolution: 2dppx) {

        .icon {
            background: $sprites2x_url;
        }

        @each $icon in $theme_icons {
            
            .#{ "icon--" + $icon } {

                @include retina_sprite_icon( $icon, $icons_sprite2x );
            }
        }
    }

}

Aquí, repasamos nuestra lista de nombres de íconos que se identifica con $theme_icons y generamos reglas de estilo retina y no retina usando nuestros íconos mixin. A partir de ahí, generamos una clase llamada .icon que será el módulo base para nuestros íconos y luego las clases de modificadores de módulo para cada ícono en la lista.

En este ejemplo, generará las clases .icon--checkmark y .icon--star. Aquí hay un ejemplo de uso del icono de estrella:

1	<i class="icon icon--star"></i>

Finalmente, importemos nuestro módulo de mixins e íconos dentro del archivo style.scss:

@import "compass";

@import "vars";
@import "mixins";
@import "theme_info";

// Base 
@import "base/normalize";

// Helpers 
@import "helpers";

// Modules
@import "modules/icons";

// States
@import "states/media_queries";

Conclusión

Sass y Compass son dos potentes utilidades y pueden contribuir en gran medida a mejorar el desarrollo de su tema de WordPress y el desarrollo del complemento de WordPress. Esta guía apunta a ponerlo en camino para crear un proceso más refinado para trabajar con WordPress.

Para aquellos que tengan curiosidad y quieran leer más sobre parte de la información cubierta en este tutorial, revise los siguientes artículos: