Utilidades de Pre Procesamiento en SASS

Frontend

En un artículo anterior te explicamos sobre SASS y tus primeros pasos con este pre procesador de codigo CSS y quedamos en hablarte sobre otros conceptos básicos como Nesteds, Parcials, Mixins, Operators, etc. , pues en este artículo lo haremos, vamos al artículo.

Operadores

En SASS podemos trabajar de manera sencilla con operadores Matemáticos, Suma (+), Resta (-), Multiplicación(*), División(/)  y Porcentaje(%). Vamos darle ancho y alto a los siguientes elementos realizando operaciones de aritmética. Tenemos una pagina con un header, sidebar al lado izquierdo, contenido en el centro, sidebar al lado derecho y footer

SASS CSS (Salida)

 

 

Variables

En SASS tienes la posibilidad de usar variables que almacenan determinados valores que podemos reutilizarlos cuando sea necesario. Cada variable debe tener el símbolo $ para que sea considerada como variable en SASS. Por ejemplo podemos crear determinadas variables y luego usarlas aplicándolas a los elementos que sean necesarios

SASS CSS (Salida)

 

 

Nesting (Anidado)

En HTML cada elemento tiene una jerarquía que hace que los elementos este ordenados, por ejemplo tenemos un menú de navegación y tiene una jerarquía nav > ul > li > a veamos lo practico y rápido que es escribirlo en SASS

SASS CSS (Salida)

 

 

Importar

Con SASS podemos importar hojas de estilos CSS, si te gusta mantener el orden, veamos un ejemplo si tenemos un archivo _colores.scss y otro archivo estilos.scss , podemos importar el archivo _colores.scss al archivo estilos.scss 

Al importar un archivo no es necesario colocar la extensión .scss del archivo ya que SASS lo detecta automáticamente.

SASS CSS (Salida)

 

 

Extender / Herencia

Es lo mas útil de SASS, con esta característica puedes heredar una propiedad creada previamente, por ejemplo si tenemos estilos para nuestros encabezados H1, H2, H3, H4, H5 y H6 les extendemos o heredamos ciertas propiedades creadas previamente

SASS CSS (Salida)

 

 

Con estas utilidades de SASS se te hará mas fácil trabajar con CSS en tu proyecto, esperamos los puedas implementar sin problemas, Diviértete !

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required