Como nuevo diseñador de temas de WordPress, aprenderá rápidamente los desafíos de mantener archivos CSS largos manteniéndolos 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 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 CSS, por qué lo necesita y cómo instalarlo y comenzar a usarlo de inmediato.
¿Qué es Sass?
El CSS que usamos ha sido diseñado para ser un lenguaje de hoja de estilo fácil de usar. Sin embargo, la web ha evolucionado, al igual que la necesidad de que los diseñadores tengan 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, mixins, etc.
Es muy similar a PHP, que es un lenguaje de preprocesador que ejecuta un script en el servidor y genera una salida HTML. De manera similar, Sass procesa previamente los archivos .scss para generar archivos CSS que pueden ser utilizados por los navegadores.
Desde la versión 3.8, los estilos del área de administración de WordPress se han adaptado para usar Sass para el desarrollo. Hay muchas tiendas de temas de WordPress y desarrolladores que ya utilizan Sass para acelerar su proceso de desarrollo.
Introducción a Sass para el desarrollo de temas de WordPress
La mayoría de los diseñadores de temas utilizan el entorno de desarrollo local para trabajar en temas antes de implementarlos en un entorno de ensayo o servidor en vivo. Dado que 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 herramienta de línea de comandos, pero también hay algunas buenas aplicaciones GUI disponibles para Sass. Se recomienda utilizar Coala, que es una aplicación gratuita de código abierto disponible para Mac, Windows y Linux.
Por el bien de este artículo, deberá crear un tema en blanco. Simplemente cree una nueva carpeta en /wp-content/themes/. Puedes llamarlo «mytheme» o como quieras. 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 un archivo style.scss archivo usando 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, ubique su directorio de temas y agréguelo como un proyecto. Notará que Koala encontrará automáticamente el archivo Sass en el directorio de hojas de estilo y lo mostrará.
Haga clic derecho en el archivo Sass y seleccione la opción Establecer ruta de salida. Ahora seleccione la raíz de su directorio de temas, por ejemplo, /wp-content/themes/mytheme/ y presione enter. Koala ahora generará el archivo de salida CSS en el directorio del tema. Para verificar esto, debe abrir el 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 los cambios y volver a Koala. Haga clic derecho en su archivo Sass y la barra lateral se desplazará hacia la derecha. Para compilar el archivo Sass simplemente haga clic en el botón «Compilar». Puedes ver los resultados abriendo el archivo style.css archivo en el directorio del tema y tendrá el CSS procesado de esta manera:
body {
font-family: arial, verdana, sans-serif; }
Observe que hemos definido una variable $fonts en nuestro archivo Sass. Ahora, siempre que necesite agregar una familia de fuentes, no es necesario que vuelva a escribir los nombres de todos los caracteres. Solo podemos usar $fonts.
¿Qué otros superpoderes aporta Sass a CSS?
Sass es increíblemente potente, compatible con versiones anteriores y muy fácil de aprender. Como se mencionó 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.
Gestión de múltiples hojas de estilo
Un problema común al que se 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 su hoja de estilo principal y producir un solo 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 @import, su archivo CSS realiza 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 usa @import en Sass, incluirá los archivos en su archivo Sass y los servirá todos en un archivo CSS para los navegadores.
Para aprender a usar @import en Sass, primero debe crear un reset.scss archivo en el directorio de hojas de estilo de su tema y pegue el 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 su archivo style.scss principal y agregar esta línea donde desea importar el archivo de recuperación:
@import 'reset';
Tenga en cuenta que no es necesario ingresar el nombre completo del archivo. Para compilarlo, 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 recuperación incluido.
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 del archivo <article> sección, debajo del selector de artículos. Como diseñador de temas de WordPress, esto le permite trabajar en diferentes secciones y modelar fácilmente cada elemento. Para ver nestin en acción, agregue esto a su archivo 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, producirá el siguiente 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ú de navegación, encabezado, etc. Usar nestin en Sass lo hace bien estructurado y no tiene que escribir las mismas clases, selectores e identificadores una y otra vez.
Usando Mixins en Sass
A veces, es posible que deba reutilizar algo de CSS en su proyecto, aunque las reglas de estilo serán las mismas porque las usará en diferentes selectores y clases. Aquí es donde los mixins son útiles. Agreguemos un mixin a su archivo style.scss:
@mixin hide-text{
overflow:hidden;
text-indent:-9000px;
display:block;
}
Este mixin básicamente oculta parte del texto de la pantalla. Aquí hay un ejemplo de cómo puede usar este mixin para ocultar el texto de su logotipo:
.logo{
background: url("logo.png");
height:100px;
width:200px;
@include hide-text;
}
Tenga en cuenta que tiene que usar @include para agregar un 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 mixins también son muy útiles con prefijos de proveedores. Al agregar valores de opacidad o radio de borde, el uso de mixins puede ahorrarle mucho tiempo. Mira este ejemplo, donde agregamos 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;
border-radius: $radius;
}
.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;
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 desarrollar temas de Sass para WordPress. Muchos diseñadores de temas de WordPress ya lo están usando. Algunos llegan a decir que todo el CSS será preprocesado en el futuro y que los desarrolladores de temas de WordPress necesitan mejorar su juego. Háganos saber lo que piensa sobre el uso de un lenguaje de preprocesador CSS como Sass para desarrollar su tema de WordPress dejando un comentario a continuación.
Recursos adicionales
¿Te ha resultado útil??
0 / 0