A lo largo de estos primeros artículos hemos logrado desarrollar y poner en práctica la mayoría de conceptos y características que nos brinda Sass de forma básica. Sí aún no has tenido oportunidad de leer los artículos anteriores de nuestra serie, te invito a revisarlos y ponerte al día antes de continuar con la segunda parte.
Ahora me gustaría comenzar a tocar temas un poco más complejos, que te permitan elaborar proyectos de una manera más profesional.
A lo largo de las últimas semanas hemos aprendido a usar Sass; el proceso de instalación y sus características principales han sido descritas en esta serie.
Imagino que ustedes al igual que nosotros quieren seguir aprendiendo temas un poco más avanzados de la herramienta. Hoy hemos llegado al punto de corte entre lo muy básico y características más complejas. En el presente artículo, trataremos de explicarles con detalle un nuevo tipo de dato Maps y el uso de Funciones en Sass.
En el artículo anterior, comenzamos a examinar las características principales de Sass. Por lo extenso del tema, decidimos dejar para un nuevo artículo tres conceptos muy importantes: Operators, Mixins y Extends.
Los dos últimos, no son difíciles de comprender pero sí es necesario una explicación clara junto a ejemplos para no confundirlos. Es muy común que al comenzar a utilizar Sass, muchos no entendamos a las primeras de cambio cual es la verdadera función de cada uno. Esto se debe a que ambos funcionan de manera parecida: fragmentos de estilos que pueden reutilizarse en cualquier lugar.
Hoy vamos a conocer esos puntos, dando conceptos, ejemplos y por último, me gustaría invitarlos a realizar una pequeña prueba para ir midiendo que tanto hemos aprendido y compartir más ampliamente nuestros conocimientos, dudas y sugerencias.
Las hojas de estilo a medida que van creciendo se van transformando en archivos complejos y difíciles de mantener. Todos los que han tenido la oportunidad de crear el frontend de un Sitio Web o Aplicación sabrán de lo que hablo, para los que no a continuación un par de ejemplos:
Imagínense una hoja de estilos de 3000 líneas de código y tener que buscar entre ese gran documento, una clase específica para agregar un color o cualquier estilo.
Tienes un Sitio Web listo para llevar a producción, pero al final, te das cuenta que debes aumentar el tamaño de letra a todo el contenido. Te acuestas, lloras por unos minutos y luego buscas línea por línea todos los font-size (propiedad CSS para especificar el tamaño de un texto) y cambias los valores, uno por uno.
Los preprocesadores (Sass, Less o cualquier otro) vienen al rescate, entregándonos características que nos permiten escribir estilos de manera amigable, divertida y estructurada. Me gusta llamarlos CSS con superpoderes.
Manuel González 11/11/2014 Sass y CSSComentarios desactivados en Aprende a instalar y usar Sass, un maravilloso preprocesador de CSS
Sass (Syntactically Awesome Style Sheets) o CSS con súper poderes, es una excelente herramienta escrita en Ruby que nos permite crear hojas de estilos estructuradas, limpias y fáciles de mantener.
Instalar Sass y comenzar a escribir estilos sin consideraciones no convertirá por arte de magia nuestras hojas de estilo en obras de arte. Es necesario tener un buen conocimiento de la herramienta y seguir una serie de buenas prácticas para conseguir nuestro cometido. Recuerden: Sass doesn’t create bad code. Bad coders do. (Sass no crea mal código, malos programadores lo hacen).
Comenzaré una serie de tutoriales, donde espero explicar ampliamente el funcionamiento de Sass, cuales son sus características y buenas prácticas. Las publicaciones se harán cada semana, dando tiempo de preparar material nuevo y que ustedes vayan probando poco a poco todo lo que vaya explicando. Siéntanse libres de comentar sus dudas en la sección de comentarios, muy amablemente trataré de responderles.
Si eres nuevo con Sass, llegaste al lugar indicado y sí ya tienes experiencia con la herramienta no sería mala idea seguir la serie para refrescar conocimientos que puede que hayas olvidado y aprender buenas prácticas.
Styde usa cookies para guardar tus preferencias y para seguimiento anónimo AceptarLeer más
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
