Episodio 38: Glamouring tu CSS (SASS)

Ha sido una Navidad refrescante en la que he vuelto a estar de pie después de comer mucha comida, sentarme en baños calientes y dormir todo el tiempo. Espero que hayan tenido una hermosa Navidad, y hoy empiezo con nuevos ojos para escribir sobre este blog juntos. Antes que empecemos,

¿Por qué querríamos glamour nuestro CSS para empezar? Dos razones principales:

  • Mucho código para procesar

Si estamos trabajando en un proyecto más grandioso, con múltiples páginas CSS y un sitio web que necesita imágenes, nuestro sitio web demorará más tiempo en renderizar.

  • Más difícil de manejar

Si tenemos muchos códigos escritos en nuestro CSS, será difícil para un desarrollador leer, y mucho menos administrar / navegar en el tiempo.

SASS es el preprocesador que muchos desarrolladores utilizan para compilar su código CSS lo más mínimo posible. No solo es más comprimido o más limpio, sino que fundamentalmente mantiene la base y el resultado de su código como CSS. ¿Cómo hace esto la diferencia? Bueno, SASS nos permite escribir código minimalista, elegante, comprimido y potente, y luego ejecutará su "compilador Sass" para convertir todo su lenguaje SASS en CSS. En otras palabras, las computadoras nunca saben que lo que les enviamos es SASS, ya que usamos un conversor de idioma para comunicarnos con un idioma con el que están familiarizados.

¿Cómo es eso de una explicación básica sobre cómo funciona SASS? ¡Auge! Sin embargo, ¡aquí es donde las cosas se ponen un poco locas! ¡No vamos a usar hojas de estilo sintácticamente impresionantes! (Dafaq!) No, para dar glamour, estamos usando SCSS (Sassy CSS). De aprenderlo en un día, parece que la sintaxis para SCSS y CSS es mucho más similar, por lo tanto, es más fácil de aprender que SASS, donde no hay puntos y comillas o corchetes.

Muchos dicen que es una preferencia de diseño. Digo, para alguien que ingresa a las profundidades de CSS, que es la ruta de natación más fácil de atravesar. Repasemos los principios básicos de las reglas y beneficios de SCSS:

¿Cómo obtengo esto? (Nodo y NPM)

¿Qué son estas cosas? Bueno.

Node, o Node.js le permite a uno escribir y ejecutar aplicaciones de Javascript en el servidor. Es un lenguaje popular que se utiliza para escribir herramientas (SASS) y ayudar con el desarrollo web local en la actualidad. Lo que el nodo es o proporciona son los paquetes que un desarrollador podría usar. Sin embargo, ¿cómo se puede acceder, organizar o acceder a estos paquetes?

NPM es un administrador de paquetes, y un administrador de paquetes es algo que usa todo desarrollador front-end. Es casi como una caja de herramientas de regalo donde un desarrollador puede elegir las herramientas que necesita para escribir mejor el código. Sin NPM, o un administrador de paquetes, nunca podremos usar o acceder a paquetes hechos en Node.

En otras palabras, SASS es un paquete de nodos y utilizaremos NPM para acceder, organizar o ejecutarlo para su uso. Guay.

Una vez que tenga la instalación de nodo y npm, verifique que tenga las versiones ejecutándose escribiendo el siguiente comando en la terminal:

 nodo -v 
npm -v

Esto listará las versiones que tiene de node y npm, y le mostrará que lo tiene. Genial, ahora cualquiera que sea el proyecto en el que te encuentres, ve dentro de esa carpeta de proyectos y ejecuta.

 npm init 

Esto creará un archivo package.json que contendrá todos los paquetes (sass) que descargaremos más tarde. Le pedirá que complete los detalles, como el nombre, el repositorio de git, la descripción, si desea entrar en detalles. Un programa bastante bonito y presentable npm es.

Ahora, simplemente instalamos el paquete:

 npm install node-sass --save-dev 

Entonces, está bastante claro que node-sass es el paquete. Sin embargo, ¿qué hace – save-dev do? Básicamente actualiza el archivo package.json con Sass y lo pone como una de las dependencias de los desarrolladores. De esta forma, no tenemos que instalarlo cada vez y de esa manera, nuestro proyecto sabe que necesitamos este paquete siempre.

Ahora, disfrute de los gráficos de carga e instálelo.

Si queremos verificar que ha sido cargado y guardado en nuestro archivo package.json, ábralo en su editor.

Aquí puede ver que "node-sass" se guarda bajo las Dependencias de desarrollo del proyecto. ¡Sí, lo hicimos! Una nota, sin embargo:

Solo usamos – save-dev, si el paquete es una herramienta para el desarrollo. Por ejemplo, si quisiéramos usar JQUERY en el proyecto, no lo usaríamos, ya que es un archivo que queremos incluir, no usar para desarrollar nuestro proyecto. (Eso tiene sentido, espero que sí). Para mostrar la diferencia en el archivo package.json, lo instalaré y mostraré la diferencia.

Vea cómo Jquery está bajo dependencias en lugar de devDependencies. Puede ser una pequeña diferencia, pero el NPM se usa para organizar nuestros paquetes. Entonces, si se nos da una característica de organización, podríamos usarla para mantener nuestros paquetes en la lista, limpiar y saber qué paquete se usa y por qué razón.

Ahora, diga si estaba trabajando en colaboración como desarrollador. Es muy probable ¿Vas a enviar todos estos archivos a continuación a tu github para que te los pasen?

¡No! ¡Porque para eso es el archivo package.json! El paquete.json es un archivo que documenta todos los paquetes que descarga. Entonces, si su amigo que está enviando este código necesita el proyecto, solo deberá enviarles los archivos, incluido el paquete.json. Luego, simplemente ejecutarían el siguiente comando a continuación considerando el hecho de que ya tienen npm y nodo.

 npm instalar 

¡Auge! Instalará los miles de archivos que vio en la imagen anterior en su computadora. Qué manera de ahorrar espacio en GITHUB o en transferencias de archivos, ¿estoy en lo cierto?

Sin embargo, en esta situación, digamos que no necesito Jquery para este proyecto. Vaya, descargué un paquete que no necesito, ¿por qué debería guardarlo? Nunca debemos mantener paquetes que no usemos.

 npm uninstall jquery --save 

Y ahora, si revisamos nuestro archivo package.json.

¡El Jquery ha desaparecido! ¡Qué!

Ahora podemos finalmente usar SASS, pero antes de hacerlo, veamos algunos conceptos que proporciona SASS o SCSS.

Variables:

Aquí, estoy usando CodePen para demostrar los beneficios de la herramienta de Sassy CSS. Puedes ver que estoy configurando una variable en la línea 6 con un signo de dólar. Todo lo que estoy configurando es el color primario para un cierto color y luego llamar a la variable en la línea 10.

El beneficio de tener variables es que en proyectos a gran escala, si quisiéramos cambiar un color, tamaño de fuente u otros elementos a lo largo del proyecto, simplemente podríamos cambiar un valor y la computadora lo procesará para nosotros. Malvado.

Si queremos ver cómo se cumple este SASSY CSS en CSS (expliqué el concepto antes), se vería así.

¡Vea cómo nuestras variables no se muestran y vea cómo nuestro color de fondo se establece en el valor de la variable que teníamos! ¡Loca!

Nesting:

Este es un concepto bastante genial pero extraño para CSS, pero puede ser realmente útil. Digamos que tenemos un ul con una clase llamada "navegación" y dentro de él tenemos múltiples <li> y un <p> que dicen "Aquí". Visualícenlo, genial. ¿Qué hacemos cuando solo queremos editar los elementos <li>? En CSS, anidamos haciendo lo siguiente:

Así es como lo hacemos en CSS, simplemente llamamos a la clase y especificamos el elemento. En SCSS, es aún mejor y lógicamente tiene más sentido.

Bueno, mira eso! ¡Simplemente podemos llamar al elemento li en nuestro selector de clase de navegación! No solo es más limpio sino también un código más corto con menos selectores para mirar.

Tomemos otro caso. Digamos que tenemos todos estos elementos <li> y lo hemos diseñado de la manera en que lo hicimos. Sin embargo, podemos ver que el primer elemento <li> está fuera de lugar. ¿Qué debo hacer para abordar eso? Sí, lo has adivinado: Nesting. Hagámoslo en CSS primero.

Genial, esto debería hacer el truco. Sin embargo, como hemos visto anteriormente que podemos anidar elementos en selectores en SCSS, ¡hagámoslo!

Whoa, ¿qué acabo de hacer allí? ¿Qué es esto y símbolo? Bueno, es un símbolo de ampersand que compila los selectores que tenemos hasta que llega a ese punto. En otras palabras, podría escribir esto en lugar de usar el símbolo comercial.

 .navigation li: primer hijo 

Esto significa lo mismo que lo que dice el ampersand. Nota: Los espacios significan una gran diferencia. Si tuviéramos una mezcla entre li y: first-child, CSS lo tomará como dos elementos diferentes y el enlace entre nuestros selectores no se realizará.

¿Qué pasaría si quisiéramos anidar cosas más profundas? Digamos que quiero abordar el objeto A en los elementos li, en el elemento ul con la clase "navegación". No hay límite para la anidación (ya que es por eso que dicen que este es el último nivel que uno debe anidar. En otras palabras, ir 3 capas de profundidad es un bizcocho perfecto)

Y podemos anidar cualquier cosa, incluso pseudo clases que definitivamente hacen que nuestro CSS sea más limpio que si usáramos el CSS original.

Una cosa sobre flotadores:

Cuando flotamos elementos (ya sea a la derecha, al centro o a la izquierda), esos elementos perderán su color de fondo si uno decide poner uno. ¿Por qué es esto? Esto se debe a que los elementos que configuramos flotan también no tienen altura y dado que no están en un bloque, el color que hemos establecido no se puede agregar al bloque.

Dilema. Qué hacemos. ClearFix.

Esta es una clase que agregaremos al elemento que afecta a todos los elementos que es nuestro navegador. Luego, escribimos el código para la siguiente clase.

A mi entender y al leerlo en W3schools, este es un truco para "Si un elemento es más alto que el elemento que lo contiene y se flota, se desbordará fuera de su contenedor". En nuestro caso, el flotador no tiene un bloque o sección en su lugar.

Lo importante aquí es la pseudoclase que usamos llamada "después", ya que esta es la clave de lo que borra o administra el método float. En el interior, estamos configurando el contenido a nada (ya que no queremos que nuestros flotadores contengan nada), claro: ambas propiedades son la otra clave que resolverá nuestro problema de flotación y las mostrará en un formato de tabla. De esa manera, supongo que las "filas" tendrán un lugar para que el color vaya. [Advertencia: a mi entender, estoy equivocado]

Esta es la forma más segura de contener un flotador.

Características de color:

Esto es algo menor pero una adición dulce a SCSS. Se llama "características HSL" y SCSS tiene estas cosas llamadas oscurecer y aclarar.

Podemos usarlo en cualquier lugar, pero digamos que lo estoy usando al pasar el mouse sobre algún botón. Mi $ color-secondary es una variable, y el método oscurecerá el color de fondo del botón en un 15%. ¡Qué loco es eso!

Vamos más profundo: Mixins.

En resumen, mixins son enormes variables de código reutilizable. ¿Por qué es esto útil? Digamos que queríamos usar la pieza de código clearfix en múltiples selectores en nuestro CSS. Si estamos siguiendo la práctica de escribir el código mínimo posible o siguiendo el principio DRY (no repetir), entonces no sería recomendable ni recomendable copiar y pegar el código de liberación que escribimos antes en cada selector que queremos ajustar.

Si estás empezando a armar el rompecabezas, sí, vamos a usar mixins para contener el código del clearfix y llamarlo. Te digo que es una situación de anidación completa. De lo contrario, piensa en ello como un método (si has codificado antes)

Para crear o usar un mixin, lo llamamos así: @mixin. El clearfix es el nombre del mixin. Para llamar a este mixin diremos @include y el nombre de mixins, que es clearfix.

Sin embargo, ¡eso no es lo único!

Mixins puede tomar argumentos. Digamos que nuestra mezcla se aplica a muchos elementos de nuestro código, pero tiene una característica que altera la estrategia. Digamos que este es un color en nuestra mezcla, y necesitamos que uno de nuestros elementos sea negro para que coincida con nuestro diseño en lugar de que el color sea blanco. ¡Podemos hacer esto!

Nuestro mixin ahora toma una discusión y ese argumento se establecerá en la propiedad de color. Entonces, cualquiera que sea el color que pasemos cuando se invoque esta mezcla, ese color se ingresará en esta mezcla. Por ejemplo:

Aquí, estoy llamando esa mezcla a un selector, y le doy una variable de color que es una variable que mantiene el color blanco. Fabuloso.

Más funciones:

Ya hemos tocado esto, pero es probable que no te hayas dado cuenta o no lo hayas notado. Cosas como "oscurecer" y "aclarar" son funciones, donde toman argumentos dependiendo de cómo se construyen.

Si uno ha codificado, uno sabe qué funciones o métodos son (básicamente código que ejecuta acciones con el código en un jist). Aunque SASS o SCSS tienen funciones incorporadas, ¡también podemos escribir nuestras propias funciones!

Aunque esto suena como una gran oportunidad de usar, uno pregunta por qué necesitarías escribir tus propias funciones dado que incluso si estuviéramos escribiendo operaciones matemáticas, SCSS y SASS nos permiten simplemente poner un "+" en el código … (Hmm, más para descubrir más tarde).

Sin embargo, hagamos una función para mostrar cómo podría funcionar una función.

Aquí, estoy haciendo una función de división simple donde tomo dos argumentos (o en este caso, números) y los devuelvo. (Ignore el signo de suma ya que no me molestaré en eliminarlo).

Ahora, si lo llamamos.

Aquí, en la propiedad de margen en el selector de navegación, equipamos este método. Si queremos que el margen sea de 30 px, ¡ponemos (60,2) como números! Sin embargo, ¿por qué puse un * 1px después? Mira, si no lo hacemos, SCSS no sabría qué unidad querríamos que fuera ese número. Podría ser porcentajes, podrían ser píxeles o em! Por lo tanto, una manera segura de asegurarnos de que nuestra unidad sea un píxel (o la unidad que elijamos), debemos multiplicar nuestros píxeles por 1.

Asumo que puedes hacer esto en el método que establecimos también. Sin embargo, este es un gran ejemplo para mostrarle cómo podemos usar funciones y operaciones matemáticas en SCSS.

Extiende:

Hasta ahora, mixins y funciones son formas en las que podemos refactorizar nuestro código CSS y herramientas que nos dan más control sobre lo que podemos ingresar en nuestro código CSS. Extiende es otra herramienta que podemos usar, para hacer lo mismo y, como su nombre lo sugiere, estamos "extendiendo código" en los elementos.

Esto puede ser útil cuando tenemos varios botones en nuestra página con el mismo estilo y efectos. Digamos que tenemos dos botones que hacen exactamente lo mismo. ¿Cómo podemos refactorizar esto?

Tenemos demasiados btn-main, btn-hots repitiendo aquí. Vamos a refactorizar usando un extender como tal.

Entonces, lo que he hecho aquí es que he puesto el código de estilo de botón en un marcador de posición (llamándolo con%) y extendiendo ese marcador de posición en el selector .btn-main. Aunque puede pensar que ahora el marcador de posición se está aplicando al selector btn-main, está equivocado.

[Una nota importante, notas]:

Si tomamos mixins y se extiende, funcionan de la misma manera pero lo que es diferente de ellos es "qué código se aplica a qué".

  • Con mixins, cuando hacemos un mixin y lo llamamos, ese mixin se aplica al selector en el que lo llamemos.
  • Con extends, cuando hacemos una extensión y la llamamos, el selector al que lo llamamos se está aplicando en la extensión.

Por lo tanto, en nuestro ejemplo extendido nuestro selector btn-main se está aplicando al btn-marcador de posición. Concepto extraño pero intenta sumergir eso.

Si te cuesta imaginarlo en tu cabeza, me gustaría pensar que mixins y extends son opuestos el uno del otro … en términos de qué código se aplica a qué.

Lo que sería interesante si alguna vez codificas en SASS en codePen, puedes ver tu SCSS compilado, que te muestra cómo la computadora terminará leyéndolo. Le mostrará qué código no se muestra (variables) y qué código ha decidido considerar cada selector.

En el CSS compilado después de que SCSS haya preprocesado.

Una regla para extends es que debe usarlos si las reglas para los elementos se relacionan inherentemente o temáticamente entre sí.

Qué significa eso. Bueno, los botones están temáticamente relacionados dado que son botones en un sitio web. Hablando desde una perspectiva de diseño, hay muchas posibilidades de que nuestros botones se vean iguales o tengan la mayoría de las mismas características. Intrínsecamente significaría si heredan el uno del otro, que todavía es un misterio nebuloso que aún tengo que explorar (por lo tanto, no entraré en ello)

En la imagen de arriba, puede ver que el CSS compilado ha colocado estos dos elementos / selectores con las siguientes propiedades. Esto puede verse como un problema de mantenimiento futuro, si los selectores no se relacionan inherentemente o temáticamente. Por ejemplo, ¿qué pasaría si quisiéramos cambiar una propiedad en esta situación donde estos botones no están relacionados? Nos llevará más tiempo regresar y tener una gran posibilidad de volver a editar el código inmensamente.

Escribir y compilar nuestros archivos SCSS / SASS.

Como todo tipo de archivo, tiene un lugar donde pertenece a nuestros archivos de código. Por lo tanto, vamos a hacer una carpeta SASS en nuestra carpeta de proyectos.

 mkdir sass 

Cambie al directorio del proyecto y haga un archivo scss. Dado que hemos estado hablando de scss todo este tiempo. (Principal es el nombre del archivo sassy css)

 cd sass 
toque main.scss

Ahora, una vez que haya escrito su código sassy css en este archivo que ha creado. Ahora vamos a entrar en su archivo package.json, donde vamos a ajustar los scripts para compilar estos archivos.

Verá que en sus guiones ya tiene algo escrito allí. Este es un script predefinido que puede cambiar y cambiaremos.

Ahora, lo que estamos escribiendo en los scripts es el script que vamos a llamar para compilar nuestro CSS. Necesitamos mencionar el paquete y los archivos que nuestro script debe compilar como tal.

Entonces, aquí estamos llamando a la compilación de scripts: sass y luego invocando el paquete que descargamos junto con el archivo que queremos compilar. Sin embargo, cuando compilamos el código, este código compilado debe ir a algún lado y entonces, nos aseguraremos de que vaya a un archivo css con el mismo nombre, en la carpeta css, porque queremos ser desarrolladores limpios y prolijos.

Entonces, para finalmente compilar sus sassy css files a css, tendríamos que ejecutar el siguiente código en nuestra línea de comandos / terminal a continuación:

 npm run compile: sass 

Y ahora, si comprueba su css / main.css o el nombre que sea su archivo css, ¡debería haber compilado todo su descarado código CSS en ese archivo!

Sin embargo, aquí es donde entramos en dilemas.

* Levanta la mano, sí señor!

"¿Qué pasa si edito mi archivo CSS Sassy y quiero ver los cambios en mi archivo CSS? ¿Esto significa que tengo que ejecutar esa línea npm cada vez que lo hago?

Gran pregunta, y vamos a agregar algo pequeño para que nuestro script sepa que hay que estar atento a los cambios.

¿Lo verificará? ¡Todo lo que necesita es un -w y notificará a nuestro código para estar pendiente de cualquier cambio que ocurra entre nuestros archivos sass o css! Puede verificar los cambios en la terminal cuando ejecuta la "compilación de ejecución npm: sass", ya que imprime los cambios que realiza en su código en su editor de texto simultáneamente. ¡Hombre de tecnología!

Nota: Creo que puedes hacer esto también con comandos sass.

 sass - mira main.scss: main.css 

"¿Qué sucede si quiero compilar varios archivos en el guión?

Muy buena pregunta, usando el comando Sass, puedes hacer esto.

 sass - mira main.scss: main.css 

Sin embargo, si estamos cambiando nuestros guiones, podemos escribir el código como tal.

 "compile:sass": "node-sass scss -o css -w" 

Este fragmento de código de lo que he leído en el artículo a continuación, debe compilar todo tu código sass en archivos css. Supongo que tendrías que hacer vaciar primero estos archivos CSS para que tu código compilado pueda ir a algún lado, pero pruébalo para ver qué funciona para ti.

He leído que no importa dónde pones el "-w" o "mirar", siempre y cuando sea antes del scss y después del sass-node …

Para más información, el enlace está a continuación:

Mira y compila Sass en cinco pasos rápidos
Sass es quizás el preprocesador de CSS más popular; durante años nos ayudó a escribir limpio, reutilizable y modular … webdesign.tutsplus.com

"¿Qué sucede si quiero ver que mis cambios sucedan automáticamente en la pantalla?

Pregunta increíble y útil para tener en cuenta. Aquí, vamos a necesitar un servidor en vivo para ver todos nuestros cambios en la pantalla cada vez que hagamos un cambio. Esto es para que no tengamos que actualizar la página cada vez, ni escribir el código cada vez.

Vamos a querer instalar este paquete globalmente porque queremos usarlo en cualquier parte de nuestro proyecto, en cualquier proyecto y en cualquier lugar de nuestra computadora. Como todos sabemos, esto definitivamente será útil más que un solo proyecto.

 npm instala live-server -g 

No podrás encontrarlo en las carpetas de tus proyectos como lo hicimos en forma global. Por lo tanto, la única forma de comprobarlo es ejecutar el servidor en vivo en nuestra terminal. Nota: Ejecute live-server en la carpeta de otra ventana ya que es posible que desee mantener sus otras ventanas de terminal para otros usuarios (verificando su proceso en sass o ejecutando otras partes de código, etc.)

 servidor en vivo 

Esto debería abrir su proyecto en su navegador predeterminado. Ahora debería ver dos cosas ahora.

  • Vea que su proyecto esté abierto en el navegador predeterminado
  • Que está conectado a un host local, (un grupo de números como 127.0.01: 1800)

Lo adivinaste, la única manera de probar si funciona es cambiar algo en tu archivo CSS, SCSS y ver si tu página de navegador predeterminada cambia algo.

En esa nota, comente a continuación cualquier comentario o ideas adicionales y su bienvenida a los 17 minutos de SCSS, resumidos por SASS.

~ Nos vemos la próxima vez

Hecho divertido del día / actualización del día:

Comienzo las últimas tres semanas de mi bootcamp de codificación la próxima semana. Es bastante desalentador, con mucha "es hora de obtener cosas serias". Entrevistas y proyectos finales. Emocionante, sí. Preparado, uno nunca está preparado.

Por lo tanto, no espere que los blogs diarios vuelvan por estas tres semanas. Sin embargo, no está de más comprobar si podría estar documentando mi proyecto final o si Dios sabe en qué estoy escribiendo entonces.

Si no, revisa las cosas que he estado haciendo, mira mi github en mi insta.

Ambos están bajo @thatdania