Como nuevo diseñador de temas de WordPress, aprenderá rápidamente los desafíos de mantener archivos CSS largos a la vez que los mantiene organizados, escalables y legibles. También aprenderá que muchos diseñadores y desarrolladores de aplicaciones para el usuario recomiendan utilizar un lenguaje de preprocesador CSS como Sass o LESS. Pero, ¿qué son estas cosas? y ¿cómo empiezas 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 de CSS, por qué lo necesita y cómo instalarlo y comenzar a utilizarlo de inmediato.
¿Qué es Sass?
El CSS que usamos fue diseñado para ser un lenguaje de hojas de estilo fácil de usar. Sin embargo, la web ha evolucionado, y también lo es la necesidad de los diseñadores de tener un lenguaje de hojas de estilo que les permita hacer más con menos esfuerzo y tiempo. Los lenguajes de preprocesador de CSS, como Sass, le permiten usar funciones que no están disponibles actualmente en el CSS, como el uso de variables, operadores matemáticos básicos, anidamiento, mixins, etc.
Es muy similar a PHP, que es un lenguaje de preprocesador que ejecuta un script en el servidor y genera un resultado HTML. Del mismo modo, Sass preprocesa archivos .scss para generar archivos CSS que pueden ser utilizados por los navegadores.
Desde la versión 3.8, los estilos de área de administración de WordPress fueron portados para utilizar Sass para el desarrollo. Hay muchas tiendas de temas de WordPress y desarrolladores que ya utilizan Sass para acelerar su proceso de desarrollo.
Comenzar con Sass para WordPress Theme Development
La mayoría de los diseñadores de temas utilizan el entorno de desarrollo local para trabajar en sus temas antes de implementarlo en un entorno de ensayo o en un servidor en vivo. 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 utilizar como una herramienta de línea de comandos, pero también hay algunas buenas aplicaciones de GUI disponibles para Sass. Recomendamos usar Koala, que es una aplicación de código abierto gratuita disponible para Mac, Windows y Linux.
Por el bien de este artículo, deberá crear un tema en blanco. Simplemente crea una nueva carpeta en / wp-content / themes / . Puedes ponerle el nombre ‘mytheme’ o cualquier otra cosa que desees. Dentro de la carpeta del tema en blanco crea otra carpeta y nómbrala hojas de estilo.
En la carpeta de hojas de estilo, debe crear un style.scss archivo usando un editor de texto como el Bloc de notas.
Ahora debe abrir Koala y hacer clic en el icono más para agregar un nuevo proyecto. Luego, ubique su directorio de temas y agréguelo como su proyecto. Notará que Koala encontrará automáticamente el archivo Sass en su directorio de hojas de estilo y lo mostrará.
Haga clic derecho en su archivo Sass y seleccione Establecer ruta de salida opción. Ahora seleccione la raíz de su directorio de tema, ejemplo, / wp-content / themes / mytheme / y presiona enter. Koala ahora generará un archivo de salida CSS en su directorio de temas. Para probar esto, necesitas abrir tu archivo Sass style.scss en un editor de texto como el Bloc de notas y agregue este código:
$ fuentes: arial, verdana, sans-serif;
cuerpo {
font-family: $ fonts;
}
Ahora debe guardar sus cambios y volver a Koala. Haga clic derecho en su archivo Sass, y la barra lateral se deslizará a la derecha. Para compilar su archivo Sass simplemente haga clic en ‘Compilar’ botón. Puede ver los resultados abriendo el style.css archivo en su directorio de temas, y tendrá el CSS procesado así:
cuerpo {
familia de fuentes: arial, verdana, sans-serif; }
Tenga en cuenta que hemos definido una variable $ fuentes en nuestro archivo Sass. Ahora, cada vez que necesitamos agregar una familia de fuentes, no necesitamos volver a escribir los nombres de todas las fuentes. Podemos simplemente usar $ fuentes .
¿Qué otros superpoderes Sass trae a CSS?
Sass es increíblemente poderoso, compatible con versiones anteriores y muy fácil de aprender. Como mencionamos anteriormente, puede crear variables, anidar, mezclar, importar, parciales, operadores matemáticos y lógicos, etc. Ahora le mostraremos algunos ejemplos, y puede probarlos en su tema de WordPress.
Administrar varias hojas de estilo
Un problema común que enfrentará como diseñador de temas de WordPress es hojas de estilo grandes con muchas secciones. Probablemente se desplazará hacia arriba y hacia abajo mucho para arreglar cosas mientras trabaja en su tema. Con Sass, puede importar varios archivos en su hoja de estilos principal y generar un único archivo CSS para su tema.
¿Qué pasa con CSS @import?
El problema con el uso de @import en su archivo CSS es que cada vez que agrega un @import, su archivo CSS realiza otra solicitud HTTP al servidor. Esto afecta el tiempo de carga de la página que no es bueno para su proyecto. Por otro lado, cuando use @import en Sass, incluirá los archivos en su archivo Sass y los servirá en un solo archivo CSS para los navegadores.
Para aprender a utilizar @import en Sass, primero debe crear un reset.scss archivo 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
Licencia: ninguna (dominio público)
* /
html, cuerpo, div, span, applet, objeto, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acrónimo, dirección, grande, citar, código,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, centro,
dl, dt, dd, ol, ul, li,
fieldset, forma, etiqueta, leyenda,
table, caption, tbody, tfoot, thead, tr, th, td,
artículo, aparte, lienzo, detalles, incrustar,
figura, figcaption, pie de página, encabezado, hgroup,
menú, nav, salida, ruby, sección, resumen,
hora, marca, audio, video {
margen: 0;
relleno: 0;
frontera: 0;
tamaño de letra: 100%;
fuente: heredar;
vertical-align: línea base;
}
/ * Restablecimiento de funciones de pantalla HTML5 para navegadores antiguos * /
artículo, aparte, detalles, figcaption, figura,
pie de página, encabezado, hgroup, menú, nav, sección {
bloqueo de pantalla;
}
cuerpo {
línea-altura: 1;
}
ol, ul {
lista-estilo: ninguno;
}
blockquote, q {
citas: ninguna;
}
blockquote: before, blockquote: after,
q: antes, q: después {
contenido: '';
contenido: ninguno;
}
mesa {
border-collapse: colapso;
espacio en el borde: 0;
}
Ahora debe abrir su archivo style.scss principal y agregar esta línea donde desea que se importe el archivo de restablecimiento:
@import 'reset';
Tenga en cuenta que no necesita ingresar el nombre completo del archivo. Para compilar esto, debe 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á su css de reinicio incluido 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
sección, debajo del selector de artículos. Como diseñador de temas de WordPress, esto le permite trabajar en diferentes secciones y estilo con facilidad cada elemento. Para ver nestin en acción, agrégalo a tu style.scss archivo:
.entry-content {
pag {
tamaño de letra: 12px;
línea-altura: 150%;
}
ul {
línea-altura: 150%;
}
a: enlace, a: visitado, a: activo {
texto-decoración: ninguno;
color: # ff6633;
}
}
Después del procesamiento, generará el siguiente CSS:
.entry-content p {
tamaño de letra: 12px;
línea-altura: 150%; }
.entry-content ul {
línea-altura: 150%; }
.entry-content a: link, .entry-content a: visited, .entry-content a: active {
texto-decoración: ninguno;
color: # ff6633; }
Como diseñador de temas, diseñará diferentes estilos y funciones para widgets, publicaciones, menús de navegación, encabezado, etc. Usar nestin en Sass lo estructura bien, y no tiene que escribir las mismas clases, selectores e identificadores sobre y otra vez.
Usando Mixins en Sass
En ocasiones, necesitaría reutilizar algunos CSS a través de su proyecto aunque las reglas de estilo sean las mismas ya que las usará en diferentes selectores y clases. Aquí es donde mixins son útiles. Permite agregar un mixin a tu archivo style.scss:
@mixin hide-text {
desbordamiento: oculto;
texto-sangría: -9000px;
bloqueo de pantalla;
}
Esta mezcla oculta básicamente algo de texto para que no se muestre. Aquí hay un ejemplo de cómo puede usar este mixin para ocultar el texto de su logotipo:
.logo{
fondo: url ("logo.png");
altura: 100px;
ancho: 200px;
@include hide-text;
}
Tenga en cuenta que debe usar @incluir para agregar un mixin. Después del procesamiento, generará el siguiente CSS:
.logo {
fondo: url ("logo.png");
altura: 100px;
ancho: 200px;
desbordamiento: oculto;
texto-sangría: -9000px;
bloqueo de pantalla; }
Mixins también son muy útiles con los prefijos del vendedor. Al agregar valores de opacidad o radio de borde, usando mixins puede ahorrarle mucho tiempo. Mire este ejemplo, donde hemos agregado un mixin para agregar el radio del borde.
@mixin border-radius ($ radius) {
-webkit-border-radius: $ radius;
-moz-border-radius: $ radius;
-ms-border-radius: $ radius;
-o-border-radius: $ radius;
radio-borde: $ radio;
}
.largebutton {@include border-radius (10px); }
.smallbutton {@include border-radius (5px); }
Después de compilar, generará el siguiente CSS:
.largebutton {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
radio del borde: 10px; }
.smallbutton {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
radio del borde: 5px; }
Esperamos que este artículo despierte su interés en Sass para el desarrollo de temas de WordPress. Muchos diseñadores de temas de WordPress ya lo están usando. Algunos llegan a decir que en el futuro todos los CSS serán preprocesados, y los desarrolladores de los temas de WordPress tendrán que mejorar su juego. Háganos saber lo que piensa sobre el uso de un lenguaje de preprocesador de CSS como Sass para su desarrollo de tema de WordPress dejando un comentario a continuación.
Recursos adicionales
Sass Lang
El camino Sass
