[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/introduccion-a-sass-para-nuevos-disenadores-de-temas-de-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/introduccion-a-sass-para-nuevos-disenadores-de-temas-de-wordpress\/","headline":"Introducci\u00f3n a Sass para nuevos dise\u00f1adores de temas de WordPress","name":"Introducci\u00f3n a Sass para nuevos dise\u00f1adores de temas de WordPress","description":"Como nuevo dise\u00f1ador de temas de WordPress, aprender\u00e1 r\u00e1pidamente los desaf\u00edos de mantener archivos CSS largos mientras los mantiene organizados, escalables y legibles. Tambi\u00e9n aprender\u00e1 ... <a title=\"Introducci\u00f3n a Sass para nuevos dise\u00f1adores de temas de WordPress\" class=\"read-more\" href=\"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/introduccion-a-sass-para-nuevos-disenadores-de-temas-de-wordpress\/\" aria-label=\"M\u00e1s en Introducci\u00f3n a Sass para nuevos dise\u00f1adores de temas de WordPress\">Leer m\u00e1s<\/a>","datePublished":"2021-06-29","dateModified":"2021-06-29","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/sass.jpg","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/sass.jpg","height":250,"width":250},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/introduccion-a-sass-para-nuevos-disenadores-de-temas-de-wordpress\/","about":["Tutoriales Wordpress"],"wordCount":1621,"articleBody":"Como nuevo dise\u00f1ador de temas de WordPress, aprender\u00e1 r\u00e1pidamente los desaf\u00edos de mantener archivos CSS largos mientras los mantiene organizados, escalables y legibles.  Tambi\u00e9n aprender\u00e1 que muchos dise\u00f1adores y desarrolladores de aplicaciones para usuario recomiendan usar un lenguaje de preprocesador CSS como Sass o LESS.  Pero, \u00bfqu\u00e9 son estas cosas?  y \u00bfc\u00f3mo empezar con ellos?  Este art\u00edculo es una introducci\u00f3n a Sass para los nuevos dise\u00f1adores de temas de WordPress.  Le diremos qu\u00e9 es un preprocesador CSS, por qu\u00e9 lo necesita y c\u00f3mo instalarlo y comenzar a usarlo de inmediato. \u00bfQu\u00e9 es Sass?El CSS que usamos fue dise\u00f1ado para ser un lenguaje de hoja de estilo f\u00e1cil de usar.  Sin embargo, la web ha evolucionado, al igual que la necesidad de los dise\u00f1adores de tener un lenguaje de hojas de estilo que les permita hacer m\u00e1s con menos esfuerzo y tiempo.  Los lenguajes de preprocesador CSS, como Sass, le permiten utilizar funciones que no est\u00e1n disponibles actualmente en CSS, como el uso de variables, operadores matem\u00e1ticos b\u00e1sicos, anidamiento, mixins, etc. Es muy parecido 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 los navegadores pueden utilizar. Desde la versi\u00f3n 3.8, los estilos del \u00e1rea de administraci\u00f3n de WordPress se adaptaron 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.  Introducci\u00f3n a Sass para el desarrollo de temas de WordPressLa mayor\u00eda de los dise\u00f1adores de temas utilizan el entorno de desarrollo local para trabajar en sus temas antes de implementarlos en un entorno de ensayo o un servidor en vivo.  Dado que Sass es un lenguaje de preprocesador, deber\u00e1 instalarlo en su entorno de desarrollo local. Lo primero que debe hacer es instalar Sass.  Se puede usar como una herramienta de l\u00ednea de comandos, pero tambi\u00e9n hay algunas aplicaciones GUI disponibles para Sass.  Recomendamos usar Coala, que es una aplicaci\u00f3n gratuita de c\u00f3digo abierto disponible para Mac, Windows y Linux. Por el bien de este art\u00edculo, deber\u00e1 crear un tema en blanco.  Simplemente cree una nueva carpeta en \/wp-content\/themes\/.  Puede nombrarlo &#8216;mytheme&#8217; o cualquier otra cosa que desee.  Dentro de su carpeta de temas en blanco, cree otra carpeta y as\u00edgnele el nombre 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 \u00edcono m\u00e1s para agregar un nuevo proyecto.  A continuaci\u00f3n, ubique su directorio de temas y agr\u00e9guelo como su proyecto.  Notar\u00e1 que Koala encontrar\u00e1 autom\u00e1ticamente el archivo Sass en su directorio de hojas de estilo y lo mostrar\u00e1. Haga clic derecho en su archivo Sass y seleccione Establecer ruta de salida opci\u00f3n.  Ahora seleccione la ra\u00edz de su directorio de temas, ejemplo, \/wp-content\/themes\/mytheme\/ y presione enter.  Koala ahora generar\u00e1 un archivo de salida CSS en su directorio de temas.  Para probar esto, debe abrir su archivo Sass style.scss en un editor de texto como el Bloc de notas y agregue este c\u00f3digo: $fonts: arial, verdana, sans-serif; body { 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\u00e1 hacia la derecha.  Para compilar su archivo Sass simplemente haga clic en el &#8216;Compilar&#8217; bot\u00f3n.  Puede ver los resultados abriendo el style.css en su directorio de temas, y tendr\u00e1 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, cada vez que necesitemos agregar una familia de fuentes, no es necesario que vuelva a escribir los nombres de todas las fuentes.  Podemos usar $fonts. \u00bfQu\u00e9 otros superpoderes aporta Sass a CSS?Sass es incre\u00edblemente poderoso, compatible con versiones anteriores y muy f\u00e1cil de aprender.  Como mencionamos anteriormente, puede crear variables, anidamiento, mixins, importaci\u00f3n, parciales, operadores matem\u00e1ticos y l\u00f3gicos, etc. Ahora le mostraremos algunos ejemplos, y puede probarlos en su tema de WordPress. Administrar varias hojas de estiloUn problema com\u00fan al que se enfrentar\u00e1 como dise\u00f1ador de temas de WordPress son las hojas de estilo grandes con muchas secciones.  Probablemente te desplazar\u00e1s mucho hacia arriba y hacia abajo para arreglar cosas mientras trabajas en tu tema.  Con Sass, puede importar varios archivos a su hoja de estilo principal y generar un solo archivo CSS para su tema. \u00bfQu\u00e9 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 su p\u00e1gina, lo que no es bueno para su proyecto.  Por otro lado, cuando usa @import en Sass, incluir\u00e1 los archivos en su archivo Sass y los servir\u00e1 todos en un solo archivo CSS para los navegadores. Para aprender a usar @import en Sass, primero debe crear un reset.scss en el directorio de hojas de estilo de su tema y pegue este c\u00f3digo en \u00e9l. \/* 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 {\tmargin: 0;\tpadding: 0;\tborder: 0;\tfont-size: 100%;\tfont: inherit;\tvertical-align: baseline;}\/* HTML5 display-role reset for older browsers *\/article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {\tdisplay: block;}body {\tline-height: 1;}ol, ul {\tlist-style: none;}blockquote, q {\tquotes: none;}blockquote:before, blockquote:after,q:before, q:after {\tcontent: '';\tcontent: none;}table {\tborder-collapse: collapse;\tborder-spacing: 0;}Ahora debe abrir su archivo style.scss principal y agregar esta l\u00ednea donde desea que se importe el archivo de restablecimiento:@import 'reset';Tenga en cuenta que no es necesario que ingrese el nombre completo del archivo.  Para compilar esto, debe abrir Koala y hacer clic en el bot\u00f3n de compilaci\u00f3n nuevamente.  Ahora abra el archivo style.css principal de su tema y ver\u00e1 su css de reinicio incluido en \u00e9l. Nestin en SassA diferencia de HTML, CSS no es un lenguaje anidado.  Sass le permite crear archivos anidados que son f\u00e1ciles de administrar y trabajar.  Por ejemplo, puede anidar todos los elementos de la &lt;article&gt; secci\u00f3n, debajo del selector de art\u00edculos.  Como dise\u00f1ador de temas de WordPress, esto le permite trabajar en diferentes secciones y dise\u00f1ar cada elemento f\u00e1cilmente.  Para ver nestin en acci\u00f3n, agregue esto a su 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\u00e9s de procesar, generar\u00e1 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\u00f1ador de temas, dise\u00f1ar\u00e1s una apariencia diferente para widgets, publicaciones, men\u00fas de navegaci\u00f3n, encabezados, etc. El uso de nestin en Sass lo hace bien estructurado, y no tienes que escribir las mismas clases, selectores e identificadores sobre y otra vez. Usando Mixins en SassA veces, necesitar\u00e1 reutilizar algo de CSS a lo largo de su proyecto, aunque las reglas de estilo ser\u00e1n las mismas porque las usar\u00e1 en diferentes selectores y clases.  Aqu\u00ed es donde los mixins son \u00fatiles.  Agreguemos un mixin a su archivo style.scss:@mixin hide-text{    overflow:hidden;    text-indent:-9000px;    display:block;}Este mixin b\u00e1sicamente oculta parte del texto para que no se muestre.  Aqu\u00ed hay un ejemplo de c\u00f3mo 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 necesita usar @include para agregar un mixin.  Despu\u00e9s de procesar, generar\u00e1 el siguiente CSS: .logo {  background: url(\"logo.png\");  height: 100px;  width: 200px;  overflow: hidden;  text-indent: -9000px;  display: block; }Los mixins tambi\u00e9n son muy \u00fatiles con los prefijos de proveedores.  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;          border-radius: $radius;}.largebutton { @include border-radius(10px); }.smallbutton { @include border-radius(5px); }Despu\u00e9s de compilar, generar\u00e1 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\u00edculo despierte su inter\u00e9s en Sass para el desarrollo de temas de WordPress.  Muchos dise\u00f1adores de temas de WordPress ya lo est\u00e1n usando.  Algunos van tan lejos como para decir que en el futuro todo CSS ser\u00e1 preprocesado, y los desarrolladores de temas de WordPress necesitan mejorar su juego.  H\u00e1ganos saber lo que piensa sobre el uso de un lenguaje de preprocesador CSS como Sass para el desarrollo de su tema de WordPress dejando un comentario a continuaci\u00f3n. Recursos adicionalesSass LangEl camino de Sass                                                                                                                                                                                                                                                                                                                                                                    4.3        \/        5        (        285                    votos                )    "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"Introducci\u00f3n a Sass para nuevos dise\u00f1adores de temas de WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/introduccion-a-sass-para-nuevos-disenadores-de-temas-de-wordpress\/#breadcrumbitem"}]}]