Como nuevo diseñador de temas de WordPress, aprenderá rápidamente los desafíos de mantener archivos CSS largos mientras los mantiene organizados, escalables y legibles. También aprenderá que muchos diseñadores y desarrolladores de aplicaciones para el usuario recomiendan usar un lenguaje de preprocesador CSS como Sass o LESS. Pero, ¿qué son estas cosas? y como empezar con ellos? Este artículo es una introducción a Sass para los nuevos diseñadores de temas de WordPress. Le diremos qué es un preprocesador CSS, por qué lo necesita y cómo instalarlo y comenzar a usarlo de inmediato.

Sass - CSS con superpoderes

¿Qué es Sass?

El CSS que usamos está diseñado para ser un lenguaje de hoja de estilo fácil de usar. Sin embargo, la web ha evolucionado y, con ella, los diseñadores necesitan un lenguaje de hojas de estilo que les permita hacer más con menos esfuerzo y tiempo. Los lenguajes de preprocesador CSS como Sass le permiten usar funciones que no están disponibles actualmente en CSS, como el uso de variables, operadores matemáticos básicos, anidamiento, aditivos, etc.

Es muy similar a PHP, que es un lenguaje de preprocesador que ejecuta un script en el servidor y genera una salida HTML. Asimismo, Sass procesa previamente los archivos .scss para generar archivos CSS que los navegadores pueden usar.

A partir de la versión 3.8, los estilos del área de administración de WordPress se han movido para usar Sass para el desarrollo. Hay muchas tiendas de temas de WordPress y desarrolladores que ya están usando Sass para acelerar el proceso de desarrollo.

Primeros pasos con Sass para crear temas de WordPress

La mayoría de los diseñadores de temas utilizan un entorno de desarrollo local para trabajar en sus temas antes de implementarlos en un entorno de ensayo o un servidor activo. Como Sass es un lenguaje de preprocesador, deberá instalarlo en su entorno de desarrollo local.

Lo primero que debe hacer es instalar Sass. Se puede usar como una utilidad de línea de comandos, pero también hay algunas buenas aplicaciones GUI disponibles para Sass. Recomendamos usar Coalaque es una aplicación gratuita de código abierto disponible para Mac, Windows y Linux.

Por el bien de este artículo, debe crear un tema en blanco. Simplemente cree una nueva carpeta en /wp-content/themes/. Puedes llamarlo «mytheme» o lo que sea. Dentro de la carpeta de temas vacía, cree otra carpeta y asígnele el nombre hojas de estilo.

En la carpeta de hojas de estilo, debe crear style.scss archivo con un editor de texto como el Bloc de notas.

Ahora debe abrir Koala y hacer clic en el ícono más para agregar un nuevo proyecto. Luego busque su directorio de temas y agréguelo como su proyecto. Notará que Koala encontrará automáticamente el archivo Sass en su directorio de estilos y lo mostrará.

Agregar un proyecto en Koala

Haga clic derecho en el archivo Sass y seleccione Establecer la ruta de salida opción. Ahora seleccione el directorio raíz del directorio de temas, por ejemplo, /wp-content/themes/mytheme/ y presione Entrar. Koala ahora generará un archivo de salida CSS en su directorio de temas. Para probarlo, debe abrir su archivo Sass style.scss en un editor de texto como el Bloc de notas y agregue este código:


$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Ahora debe guardar sus cambios y volver a Koala. Haga clic derecho en el archivo Sass y la barra lateral se moverá hacia la derecha. Para compilar un archivo Sass, simplemente haga clic en ‘Compilar’ botón. Puedes ver los resultados abriendo style.css en su directorio de temas y el CSS procesado se verá así:


body {
  font-family: arial, verdana, sans-serif; }

Tenga en cuenta que hemos definido una variable $fonts en nuestro Sass. Ahora, cada vez que necesitamos agregar una familia de fuentes, no tenemos que volver a escribir todos los nombres de las fuentes. Solo podemos usar $fonts.

¿Qué otros superpoderes aporta Sass a CSS?

Sass es increíblemente poderoso, compatible con versiones anteriores y muy fácil de aprender. Como mencionamos anteriormente, puede crear variables, anidamientos, aditivos, importación, parciales, operadores matemáticos y lógicos, etc. Ahora le mostramos algunos ejemplos que puede probar en su tema de WordPress.

Gestionar varias hojas de estilo

Uno de los problemas comunes que enfrentará como diseñador de temas de WordPress son las hojas de estilo grandes con muchas secciones. Es probable que te desplaces mucho hacia arriba y hacia abajo para arreglar las cosas mientras trabajas en tu tema. Con Sass, puede importar varios archivos a la hoja de estilo principal y generar un solo archivo CSS para su tema.

¿Qué pasa con CSS @import?

El problema de usar @import en un archivo CSS es que cada vez que agrega @import, el archivo CSS envía otra solicitud HTTP al servidor. Esto afecta el tiempo de carga de la página, lo que no es bueno para su proyecto. Por otro lado, cuando use @import en Sass, incluirá los archivos en su archivo Sass y los mostrará todos en un archivo CSS para los navegadores.

Para aprender a usar @import en Sass, primero debe crear reset.scss en el directorio de hojas de estilo de su tema y pegue este código en él.


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Ahora debe abrir el archivo style.scss principal y agregar esta línea donde desea importar el archivo de restablecimiento:


@import 'reset';

Tenga en cuenta que no es necesario que introduzca el nombre completo del archivo. Para compilar esto, deberá abrir Koala y hacer clic en el botón de compilación nuevamente. Ahora abra el archivo style.css principal de su tema y verá el css de reinicio en él.

Nestin en Sass

A diferencia de HTML, CSS no es un lenguaje anidado. Sass le permite crear archivos anidados que son fáciles de administrar y trabajar. Por ejemplo, puede anidar todos los elementos para <article> debajo del selector de artículos. Como diseñador de temas de WordPress, esto le permite trabajar en diferentes secciones y diseñar fácilmente cada elemento. Para ver el nestin en acción, agregue esto al suyo style.scss expediente:


.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

Después del procesamiento, generará el siguiente código CSS:


.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Como diseñador de temas, diseñarás un aspecto diferente para widgets, publicaciones, menús de navegación, encabezados, etc. El uso de nestin en Sass te brinda una buena estructura y no tienes que escribir las mismas clases, selectores e identificadores. una vez más.

Usando mixins en Sass

A veces, tendrá que reutilizar algo de CSS a lo largo de su proyecto, incluso si las reglas de estilo son las mismas que las usará en diferentes selectores y clases. Aquí es donde los mixins son útiles. Agreguemos mixin al archivo style.scss:


@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Básicamente, esta combinación oculta parte del texto para que no se muestre. A continuación, se muestra un ejemplo de cómo puede utilizar este aditivo para ocultar texto en su logotipo:


.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Tenga en cuenta que debe utilizar @include agregue mixin. Después del procesamiento, generará el siguiente CSS:


.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Los aditivos también son muy útiles con los prefijos de los proveedores. Puede ahorrar mucho tiempo agregando valores de opacidad o un radio de borde al usar aditivos. Eche un vistazo a este ejemplo donde agregamos un mixin para agregar un radio de borde.


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

Cuando se compile, generará el siguiente código CSS:


.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }

.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Esperamos que este artículo haya despertado su interés en Sass para crear temas de WordPress. Muchos diseñadores de temas de WordPress ya lo están usando. Algunos incluso llegan a decir que en el futuro todo el CSS será preprocesado y los desarrolladores de temas de WordPress necesitarán mejorar su juego. Háganos saber lo que piensa sobre el uso de un lenguaje de preprocesador CSS como Sass para crear temas de WordPress dejando un comentario a continuación.

Recursos adicionales

Sat Lang
Sass Way