Como nuevo diseñador de temas de WordPress, comprenderá 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 front-end recomiendan usar lenguajes de preprocesador CSS como Sass o LESS. Pero, ¿qué son estas cosas? y ¿cómo empezar a usarlos? Este artículo es una introducción a Sass para los nuevos diseñadores de temas de WordPress. Le diremos qué son los preprocesadores CSS, por qué los necesita y cómo instalarlos y comenzar a usarlos 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, por lo que 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 de CSS, como Sass, le permiten usar funciones que actualmente no están disponibles con CSS, como el uso de variables, operadores matemáticos básicos, anidamiento, combinación y más.

Es muy similar a PHP, un lenguaje de preprocesador que ejecuta scripts en el servidor y produce una salida HTML. Del mismo modo, Sass procesa previamente los archivos .scss para generar archivos CSS listos para el navegador.

A partir de la versión 3.8, los estilos del área de administración de WordPress se han portado 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.

Comience con el desarrollo de temas de WordPress con Sass

La mayoría de los diseñadores de temas utilizan un entorno de desarrollo local para trabajar en su tema antes de implementarlo en un entorno de prueba o en un servidor en vivo. Dado que Sass es un lenguaje de preprocesador, debe 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. Recomendamos Koala, una aplicación gratuita y de código abierto para Mac, Windows y Linux.

A los efectos de este artículo, deberá crear un tema en blanco.Solo crea una nueva carpeta en /wp-content/themes/Puede nombrarlo “mytheme” o cualquier otra cosa que desee. Cree otra carpeta en su carpeta de tema en blanco y asígnele el nombre hojas de estilo.

En la carpeta de hojas de estilo, debe crear un style.scss Cree el 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 elemento. A continuación, busque su directorio de temas y agréguelo como su proyecto. Notará que Koala encuentra automáticamente el archivo Sass en su directorio de hojas de estilo y lo muestra.

Agregar elemento a koala

Haga clic derecho en su archivo Sass y seleccione la opción Establecer ruta de salida. Ahora seleccione la raíz del directorio del tema, por ejemplo, /wp-content/themes/mytheme/ Luego presiona enter. Koala ahora generará archivos de salida CSS en su directorio de temas.Para probar esto necesitas abrir tu archivo Sass style.scss Agregue el siguiente código en un editor de texto como el Bloc de notas:

$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 deslizará hacia la derecha. Para compilar su archivo Sass, simplemente haga clic en el botón “Compilar”.Se puede abrir para ver los resultados. style.css archivo en su directorio de temas, habrá procesado CSS de esta manera:

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

Tenga en cuenta que hemos definido una variable $fonts en nuestro archivo Sass. Ahora, cada vez que necesitemos agregar una familia de fuentes, no necesitamos ingresar los nombres de todas las fuentes nuevamente.nosotros podemos usar $fonts.

¿Qué otros superpoderes aporta Sass a CSS?

Sass es muy potente, compatible con versiones anteriores y muy fácil de aprender. Como mencionamos antes, puede crear variables, anidamiento, mezclas, importaciones, secciones, operadores matemáticos y lógicos, y más. Ahora le mostraremos algunos ejemplos que puede probar en su tema de WordPress.

Administrar múltiples hojas de estilo

Un problema común que enfrentará como diseñador de temas de WordPress es una hoja de estilo grande con muchas secciones. Cuando trabaja en un tema, puede desplazarse hacia arriba y hacia abajo para solucionar el problema. Con Sass, puede importar varios archivos a la hoja de estilo principal y generar un archivo CSS para su tema.

¿Qué tal CSS @import?

El problema de usar @import en archivos CSS es que cada vez que agrega @import, el archivo CSS realiza otra solicitud HTTP al servidor. Esto afecta el tiempo de carga de su página, lo cual no es bueno para su proyecto. Por otro lado, cuando usa @import en Sass, incluye los archivos en su archivo Sass y los envía todos al navegador como un único archivo CSS.

Para aprender a usar @import en Sass, primero debe crear un reset.scss Cree un 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
   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 principal style.scss y agregar esta línea a la ubicación donde desea importar el archivo de reinicio:

@import 'reset';

Tenga en cuenta que no necesita ingresar el nombre de archivo completo. Para compilar esto, debe abrir Koala y hacer clic en el botón de compilación nuevamente. Ahora abra el archivo style.css principal del tema y verá que contiene el css de reinicio.

Guarida de Sarth

A diferencia de HTML, CSS no es un lenguaje anidado. Sass le permite crear archivos anidados que son fáciles de administrar y usar.Por ejemplo, puede anidar todos los elementos <article> sección, debajo del selector de artículos. Como diseñador de temas de WordPress, esto le permite trabajar fácilmente en las diferentes secciones y diseñar cada elemento.Para ver Nestin en acción, agréguelo a su style.scss documento:

.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, se generará 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á diferentes estilos para widgets, publicaciones, menús de navegación, encabezados y más. El uso de Nestin en Sass lo hace bien estructurado y no tiene que escribir las mismas clases, selectores e identificadores. de nuevo.

Usando Mixins en Sass

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

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

Este mixin básicamente oculta parte del texto para que no se muestre. Aquí hay un ejemplo de cómo ocultar el texto del logotipo usando este mixin:

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

Tenga en cuenta que necesita usar @include Agrega una mezcla. Después del procesamiento, se 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 útiles para los prefijos de proveedores. El uso de mixins puede ahorrarle mucho tiempo al agregar valores de opacidad o radio de borde. Eche un vistazo a este ejemplo, 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;
          border-radius: $radius;
}

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

Después de la compilación, se 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 el desarrollo de temas de WordPress con Sass. Muchos diseñadores de temas de WordPress ya lo están usando. Algunos incluso dicen que en el futuro todo el CSS será preprocesado y que los desarrolladores de temas de WordPress necesitan mejorar su juego. Háganos saber sus pensamientos sobre el uso de lenguajes de preprocesador CSS como Sass para el desarrollo de temas de WordPress dejando un comentario a continuación.

Otros recursos

saslang
El Camino de Saas

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.