El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Genera CSS más rápido con el preprocesador Sass

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
07:37
  Añadir a marcadores

Transcripción

Si te acabas de subir al tren del desarrollo y diseño web o si ya eres un veterano y no habías escuchado hablar de SASS o temías usarlo porque se oye complejo, no temas. SASS, lejos de ser este concepto de complejidad es la cosa más sencilla y rápida que puedes usar para generar CSS de una manera organizada, rápida y eficiente. SASS tiene varios conceptos en su haber muy interesantes como el preprocesamiento de reglas y estilos, variables, agrupaciones, fragmentación de código, posibilidad de importar y usar archivos de SASS, mixings, herencias y hospedadores. Y sí, se escucha como algo muy amplio y complejo de dominar pero no te preocupes. Si eres nuevo, los conceptos son extremadamente sencillos de entender. Y si eres un viejo lobo de mar ya te has ensuciado las manos con JavaScipt, CSS y HTML verás que el uso de SASS está hecho para ti, pues muchos conceptos de programación puedes usarlos para generar estilos sin temor a que algo falle. En el mercado, existe también LESS, que al igual que SASS, tiene un acercamiento diferente al preprocesamiento de estilos, pero sin demeritar que es también una gran herramienta. ¿Cuál usar? El que más te guste, convenga y facilite. Yo llevo trabajando con SASS ya un par de años y es lo mejor que puedo encontrar para lidiar con el uso y aplicación de reglas complejas de CSS o incluso Media Queries. Podrás encontrar el sitio oficial de SASS en la dirección sass-lang.com. Aquí viene toda la documentación e información necesaria para que puedas trabajar directamente con SASS. Los procesos de instalación son realmente simples. De hecho, si te vas a la sección de Install podrás encontrar que hay dos maneras en que puedes trabajar con SASS. Uno, a través de aplicaciones existentes que ya tienen todo el proceso completado y simplemente instalas y comienzas a usar y otro a través de línea de comandos. Vamos a realizar este proceso. Depende de donde trabajes, las líneas de comandos o el formato cambie. Por ejemplo, si estás con Linux, es una forma, si estás con Windows es otra, a través de un instalador y si estás con Mac, es a través de un par de líneas de comando. En este caso, que estamos trabajando con Mac, vamos a generar la instalación y el uso de una página con SASS. Así que primero tenemos que hacer el proceso de instalación. Para poder instalar, utilizaremos sudo gem install sass. Voy a poner aquí la contraseña porque a final de cuentas, SASS es una gema de Ruby entonces, tengo que utilizar este proceso de instalación. En este caso, ya lo tengo instalado y vamos a validar que esto se encuentre así. Cuando tú ejecutas el comando sass-v te va a indicar cuál es la versión y el nombre de la versión con la que te encuentras. Listo. Ahora que ya tenemos esto, vamos a ver un par de cosas. Primero, para poder trabajar, yo tengo una serie de archivos puestos en un sitio web y voy a trabajar con un archivo con una extensión llamada scss es decir, sass css. Aquí es donde voy a escribir yo todo mi código SASS y, por ahora, en este ejercicio encontraremos que hay la definición de un estilo para una caja. Este, obviamente, no se encuentra conectado todavía porque nuestro archivo index.html va a consumir lo que hay en cssstyle.css. Y si tú navegas en esta carpeta, obviamente, no hay nada por ahora. Así que vamos a comenzar a trabajar con SASS. Regresamos a la línea de comandos y me voy a ingresar a la carpeta donde tengo mi proyecto que en este caso, la carpeta se llama sass. Si yo reviso el contenido veo que aquí se encuentran todos los archivos con los que voy a trabajar. Y lo primero que debería de hacer es invocar a la herramienta. Escribo su nombre, sass y después de esto le voy a decir que yo quiero que esté escuchando todo lo que tenemos en la carpeta sass por eso escribo sass/*. Si tú te das cuenta, tenemos aquí dicha carpeta que es sass. Entonces, si tenemos uno o más archivos, va a reconocer todos. Posterior a esto, doy un espacio y le voy a indicar que todo lo que encuentre ahí lo compile y además, me lo lleve a la carpeta css y lo meta en el archivo style.css. De esta forma, aunque no existe el archivo lo va a generar el motor. Vamos a ejecutarlo; vamos a escribir Enter y una vez que ya lo tenemos así, ejecutándolo vemos cómo ya me generó aquí un estilo. Por ahora noy hay mucha diferencia porque los estilos son muy similares. Ahora voy a hacer otro ejercicio y voy a eliminar de nuevo estos archivos dentro de la carpeta porque también podemos hacer que esto sea automático. Es decir, que cada que yo hago un cambio en mi archivo automáticamente se genere el SASS. Entonces, lo que tendré que hacer es escribir de nuevo sass e indicar que vamos a ejecutar un watcher es decir, que vamos a estar observando y que vamos a estar observando como tal la carpeta sass, después escribirmos el símbolo de dos puntos para que todo lo que encuentre en SASS lo envíe a la carpeta css. Lo ejecutamos, y se queda un proceso abierto. Ese proceso abierto es el que va a escuchar todos los cambios. Vemos cómo aquí ya también me generó este cambio. Así que por ahora vamos a hacer lo siguiente: voy a dividir yo mi pantalla, y vamos a escribir un par de estilos más. En el archivo html, tenemos que hay etiquetas de H1 y etiquetas párrafo. Entonces, lo que tendremos que hacer es crear una nueva regla para lo cual, lo que voy a trabajar, en este caso, es mostrar cómo son las etiquetas anidadas. Si nosotros revisamos en el código que tenemos de html, este H1 vive dentro de la etiqueta div. Entonces, aquí adentro, en el archivo sass yo puedo escribir h1 y definir la regla. Esto no se puede hacer con CSS normal, así que yo simplemente lo escribo aquí y estoy indicando que es todo h1 que viva dentro de una etiqueta con una clase box. Entonces por acá, vamos a poner un color y vamos a escribir que sea un color blanco. Listo. Si se dan cuenta, esto guardó, y del lado derecho cambiaron mis estilos. Si yo me voy a la línea de comandos, puedo ver que hay unos cambios y dichos cambios significan que se actualizó el CSS. Y si tú ves el CSS, ya me generó directamente el estilo con la regla adecuada. Por lo tanto, no hay que modificar los archivos CSS, siempre tu estilo lo modificas directamente en Style. Y también hay otra cosa que podremos hacer y esta es la declaración de variables. Por ejemplo, vamos aquí al inicio y para declarar una variable en SASS, escribimos el símbolo de dólar ($) y vamos a ponerle párrafo-color, voy a escribir solamente la "p" porque yo quiero afectar a ese tipo de etiquetas y esto solamente es como referencia. Aquí yo puedo escribir cuál es el color que yo quiero ocupar. En este caso, lo estoy definiendo como green. Así entonces, yo, por ejemplo, voy a agregar aquí otra etiqueta anidada que se llama "p" y le voy a indicar cuál es el color que quiero ocupar y, en lugar de mandar el color per se, yo puedo enviar la variable. Así, si tengo muchas instancias de esta variable, simplemente, cada que yo lo utilice o cada que lo actualice esta variable va a afectar a todos los elementos que hagan referencia a dicha variable y, cuando esto lo traducimos, --si nos fijamos del lado derecho-- vamos a ver cómo también tenemos ya la etiqueta generada adecuadamente y no tuvimos que meter mano absolutamente en el CSS. Estas son dos de las características principales que puedes tener con SASS. Como ves, es una herramienta bastante fácil y dócil de utilizar.